Question

我正在尝试在反应路由器中使用嵌套路由。但是我的嵌套 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理解为一般字符串。并像

一样传递网址

<?php

    # echo the calendar data
    if( $calhtml ) echo $calhtml; 

?>

在下面找到更新的代码：

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

试试吧，希望这会有所帮助。

Answer 2

在您的主路由器上，您声明

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

因为您一方面将路径设置为 exact，并且未将路径声明为 students*，所以导航到 students/1 时，您没有进入 Route完全包含子路由器。

反应路由器嵌套

2 个答案: