Вложенность React Router

Я пытаюсь использовать вложенную маршрутизацию в реагирующем маршрутизаторе. Но мой роутинг вложения не работает. Если это не так, я использую Typescript.

//This is working
<Route exact path={path} component={StudentList}></Route>
//This is not working
<Route path={`${path}/:id`} component={StudentComponent}></Route>

У меня есть модуль под названием StudentModule. В модуле a есть два маршрута, как указано выше, когда я направляюсь к /students/1, ничего не отображается

Я создал образец приложения на CodeSandbox https://codesandbox.io/s/vibrant-pasteur-n1eq7

Чтобы узнать, что не так, перейдите к студентам в меню и нажмите ученик. Он должен отрендерить StudentComponent и написать Student works на экране.

Пожалуйста, помогите мне, что не так в моем коде?


react-router-dom react-router nested-routes
person Ali Hadi Ozturk    schedule 20.12.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

На своем основном маршрутизаторе вы заявили

  <Route exact path="/students" component={StudentModule} />

Поскольку вы устанавливаете путь как exact с одной стороны, а не объявляете путь как students*, при переходе к students/1 вы вообще не входите в Route, в котором находится подмаршрутизатор.

person Hagai Harari    schedule 20.12.2020
comment
Спасибо. Это работает сейчас - person Ali Hadi Ozturk; 20.12.2020

arrow_upward
0
arrow_downward

В компоненте StudentModule объявите идентификатор переменной, я думаю, вы его пропустили, и строковый литерал понимает идентификатор как общую строку. И передайте URL как

<Route exact path={`${path}/${id}`} component={StudentComponent}></Route>

Найдите обновленный код ниже:

import React from "react";
import { useEffect } from "react";
import { Route, Switch, useRouteMatch } from "react-router-dom";
import StudentComponent from "./Student";
import StudentList from "./StudentList";

export default function StudentModule() {
  let { path } = useRouteMatch();
let id = 1;
  useEffect(() => {
    console.log(path);
  });
  return (
    <Switch>
      <Route exact path={path} component={StudentList}></Route>
      <Route exact path={`${path}/${id}`} component={StudentComponent}></Route>
    </Switch>
  );
}

попробуйте, надеюсь, это будет полезно.

person SWATI PRIYA    schedule 20.12.2020