Вложение маршрутизатора React
я пытаюсь использовать вложенную маршрутизацию в реагирующем маршрутизаторе. Но мой вложенный маршрут не работает. Если это имеет значение, я использую Typescript.
//This is working
<Route exact path = {path} component = {StudentList}></Route>
//This is not working
<Route path = {`${path}/:id`} component = {StudentComponent}></Route>
У меня есть модуль под названием StudentModule. В модуле есть два маршрута, как указано выше, когда я направляюсь к
/students/1 ничего не рендерить
Я создал пример приложения в CodeSandbox https://codesandbox.io/s/vibrant-pasteur-n1eq7
Чтобы узнать, что не так, перейдите к учащимся в меню и нажмите «Ученик». Он должен отобразить StudentComponent и написать Student works на экране.
Пожалуйста, помогите мне, что не так в моем коде?
Ответы 2
В компоненте 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.info(path);
});
return (
<Switch>
<Route exact path = {path} component = {StudentList}></Route>
<Route exact path = {`${path}/${id}`} component = {StudentComponent}></Route>
</Switch>
);
}
попробуйте, надеюсь, это будет полезно.
На своем основном маршрутизаторе вы объявили
<Route exact path = "/students" component = {StudentModule} />
Поскольку вы устанавливаете путь как exact с одной стороны, а не объявляете путь как students*, при переходе к students/1 вы вообще не входите в Route, который содержит подмаршрутизатор.