React Router 嵌套

Question

我正在尝试在 React 路由器中使用嵌套路由。但我的嵌套 routig 不工作。如果那有所不同，我正在使用 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。

请帮我看看我的代码有什么问题吗？

Answer 1

在组件 StudentModule 中，请声明变量 id，我想你错过了它，字符串文字将 id 理解为一般字符串。并传递 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>
  );
}

尝试一下，希望这会有所帮助。

Answer 2

在你的主路由器上，你声明了

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

因为您一方面将路径设置为 exact，而不是将路径声明为 students*，而导航到 students/1，您没有进入 [=14] =] 完全包含子路由器。

React Router 嵌套

React Router nesting

nested-routes

react-router

react-router-dom