Javascript React-router.Nested路由

如何制作嵌套路由

我希望初始路线为course/：course\u id？之后，当我点击一个节点时，我希望我的url变成course/：course\u id？/nodes/：node\u id

我使用：反应路由器dom:^4.2.2

当我单击id时，会将我重定向到课程/节点并跳过：课程\u id

return(
        <div className="paragraph-text-child" onClick={() => this.props.select(chapter)} key={chapter.node_id} >
            <Link to="nodes">{chapter.text}</Link>
            {this.iterate(chapter.nodes)}
        </div>
    );

---

我想你把一些概念搞混了。。。路由用于处理接收到的URL，链接用于设置它

链接不知道路由，路由不知道链接。链接将URL设置为在中指定的内容。因此，如果当前URL为/course，且to=nodes，则结果为/course/nodes。如果它是to=0/节点，结果将是/courses/0/节点

如果我理解正确，您总是希望在/courses和/nodes之间有一个数字，对吗

这可以通过重定向实现，重定向也来自react路由器dom

如果创建以下管线：

<Route path="/courses" render={()=> <Redirect to="/courses/0"/>}/>

这应该处理/course/course\u id

现在，如果要嵌套/course/：course\u id/nodes/：node\u id路由，则应将其放入父路由渲染的组件中

让我们将父路线重新设计为：

<Route path="/course/:course_id" render={(props) => <Content ...props />}/>

---

这有意义吗？我可能遗漏了您代码中的一些要点-您想要实现的想法就在这里，但您可能需要对其进行一些调整…

您好，我想您混淆了一些概念。。。路由用于处理接收到的URL，链接用于设置它。链接不知道路由，路由不知道链接。链接将URL设置为在中指定的内容。因此，如果当前URL为/course，且to=nodes，则结果为/course/nodes。如果是to=0/nodes，结果将是/courses/0/nodes。您好，course/是我接收并显示特定课程内容列表的url，我想设置我的url，当用户单击该特定课程的内容时，我想让我的url变成这样-course//nodes，其中是用户单击的特定元素的id，当用户单击时，我需要向服务器请求获取数据。我想我理解您的目标，请回答以下问题

<Route path="/course/:course_id" component={Content}/>

...
<Header/>
  <Switch>
    <Route path="/course/:course_id" component={Content}/>
    <Route path="/courses" render={()=> <Redirect to="/courses/0"/>}/>
  </Switch>
<Footer/>
...

<Route path="/course/:course_id" render={(props) => <Content ...props />}/>

render() {
  return <Route path="/course/:course_id?/nodes/:node_id?" component={NodeContent}/>
}

<Link to={"nodes/" + chapter.node_id}/>