Кто может показать как сделать с массива список элементов внутри которых есть ссылки на другой компонент используя REACT и REACT-ROUTER. При нажатии на ссылку должен появиться компонент под ссылкой. В компоненте Courses не получается динамически создать елементы с ссылками на другие компоненты
Пример который не работает :
import React, { Component } from 'react';
import {BrowserRouter,Route,Link} from 'react-router-dom';
import Courses from './containers/Courses/Courses';
import Users from './containers/Users/Users';
class App extends Component {
render () {
return (
<div className="App">
<ol style={{textAlign: 'left'}}>
<li>Add Routes to load "Users" and "Courses" on different pages (by entering a URL, without Links)</li>
<li>Add a simple navigation with two links => One leading to "Users", one leading to "Courses"</li>
<li>Make the courses in "Courses" clickable by adding a link and load the "Course" component in the place of "Courses" (without passing any data for now)</li>
<li>Pass the course ID to the "Course" page and output it there</li>
<li>Pass the course title to the "Course" page - pass it as a param or score bonus points by passing it as query params (you need to manually parse them though!)</li>
<li>Load the "Course" component as a nested component of "Courses"</li>
<li>Add a 404 error page and render it for any unknown routes</li>
<li>Redirect requests to /all-courses to /courses (=> Your "Courses" page)</li>
</ol>
<h1>LINKS:</h1>
<BrowserRouter>
<div>
<div>
<ol style={{textAlign: 'center'}}>
<li><Link to="/user">Link to Users</Link></li>
<li><Link to="/courses">Link to Courses</Link></li>
</ol>
</div>
<div>
<Route path="/user" exact component={Users}/>
<Route path="/courses" exact component={Courses}/>
</div>
</div>
</BrowserRouter>
</div>
);
}
}
export default App;
import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import {Route,Router} from 'react-router-dom';
import './Courses.css';
import Course from '../Course/Course'
class Courses extends Component {
state = {
courses: [
{ id: 1, title: 'Angular - The Complete Guide' },
{ id: 2, title: 'Vue - The Complete Guide' },
{ id: 3, title: 'PWA - The Complete Guide' }
]
}
render () {
return (
<div>
<h1>Amazing Udemy Courses</h1>
<section className="Courses">
{
this.state.courses.map( course => {
return (
<div>
<article className="Course" key={course.id}>{course.title}</article>
<ol style={{textAlign: 'center'}}>
<li><Link to={match.url}>Link to Course</Link></li>
</ol>
</div>
);
} )
}
<Route path={match.url} exact component={Course} />
</section>
</div>
);
}
}
export default Courses;
import React, { Component } from 'react';
class Course extends Component {
render () {
return (
<div>
<h1>_COURSE_TITLE_</h1>
<p>You selected the Course with ID:</p>
</div>
);
}
}
export default Course;
Простой