Кто может показать как сделать с массива список элементов внутри которых есть ссылки на другой компонент используя REACT и REACT-ROUTER?

Question

[Quintis]

Кто может показать как сделать с массива список элементов внутри которых есть ссылки на другой компонент используя 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;

Answer 1

[akyl-kb]

1. (App.js) Убрать exact для courses
<Route path="/courses" component={Courses}/>

2. (Courses.js) Компонент Link изменить

<Link to={`/courses/${course.id}`}>Link to Course</Link>

3. Читай документацию
https://reacttraining.com/react-router/web/guides/...

Answer 2

[Yana Tomkovich]

проще посмотреть видосик