React-router-dom маршрутизация на новую страницу с реквизитом

Question

Мой вопрос может показаться глупым, потому что у меня недостаточно опыта в React JS. У меня есть этот компонент:

import { BrowserRouter, Route, NavLink } from "react-router-dom";
import CourseInfo from "./CourseInfo";
import OneCourse from "./OneCourse";

class CourseList extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <div className="row courses">
            {this.props.corses.map(course => (
              <NavLink key={course._id} to={`/courses/profile/${course._id}`}>
                <OneCourse course={course} />
              </NavLink>
            ))}
          </div>
          <Route
            exact
            path={`/courses/profile/:id`}
            render={({ match }) => (
              <CourseInfo
                index={match.params.id}
                course={
                  this.props.corses.filter(el => el._id === match.params.id)[0]
                }
              />
            )}
          />
        </BrowserRouter>
      </div>
    );
  }
}

Когда я нажимаю на компонент OneCourse, он показывает мне компонент CourseList на той же странице с компонентом CourseInfo, добавленным внизу.

Как я могу отправить пользователя на новую страницу, содержащую только CourseInfo, зная, что у меня есть параметры для отправки с этого компонента на CourseInfo? Я хочу показать CourseInfo компонент на другой странице, которая не содержит CourseList

Answer 1

<NavLink> просто отлично.В остальном вы можете использовать компонент <Switch>:

import { BrowserRouter, Route, NavLink, Switch } from 'react-router-dom';
class CourseList extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <Switch>
          <Route
            exact
            path={`/`} render={({ match }) => (
              <div className="row courses">
                {this.props.corses.map(course => (
              <NavLink key={course._id} to={`/courses/profile/${course._id}`}>
                <OneCourse course={course} />
              </NavLink>
            ))}
            </div>
            )}
          />
          <Route
            exact
            path={`/courses/profile/:id`}
            render={({ match }) => (
              <CourseInfo
                index={match.params.id}
                course={
                  this.props.corses.filter(el => el._id === match.params.id)[0]
                }
              />
            )}
          />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

Цитирование из документов :

Параметр уникален тем, что он отображаетмаршрут исключительно.Напротив, каждый, который соответствует местоположению, рендерится включительно.

При сложной маршрутизации подход render props сбивает с толку.Перенос маршрутизации на отдельный компонент является лучшим подходом:

import React from 'react';
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";
import CourseList from './CourseList';
import Course from './Course';

function App() {
  return (
    <BrowserRouter>
      <Switch>
       <Route exact path="/" component={CourseList} />
       <Route exact path="/courses/profile/:id" component={Course} />
       </Switch>
    </BrowserRouter>
  );
}

export default App;

Тогда ваш CourseInfo компонент будет выглядеть так:

class CourseList extends Component {   
  render() {
    return (
      <div>

          <div className="row courses">
            {this.props.corses.map(course => (
              <NavLink key={course._id} to={`/courses/profile/${course._id}`}>
                <OneCourse course={course} />
              </NavLink>
            ))}
          </div>
      </div>
    );   
} }

Официальная документация предоставляет множествопримеры.