React-router.Nested路由

Question

如何制作嵌套路线？？？

我希望初始路线为course /：course_id？ 之后，当我单击一个节点时，我希望我的网址成为course /：course_id？/ nodes /：node_id。

我使用： “ react-router-dom”：“ ^ 4.2.2”

return (
    <Router>
      <div id="app-main">
        <Header />
        <Route path="/course/:course_id?" component = {Content}/>
            <Route path="/course/:course_id?/nodes" component = {Content}/>
        <Footer />
      </div>
    </Router>

    );

当我单击ID时，会将我重定向到课程/节点，并跳过：course_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>
    );

Answer 1

我认为您混淆了一些概念...路由用于处理收到的URL，链接用于设置它。

链接不知道路由，路由不知道链接。 链接设置的URL是什么规定to 。 因此，如果您当前的URL是/ course，并且是to="nodes" ，则结果是/ course / nodes。 如果它是to="0/nodes" ，则结果将是/ courses / 0 / nodes。

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

这也可以通过Redirect来实现， Redirect也来自react-router-dom 。

如果创建以下路线：

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

并重做之前的路线，以便course_id并非可选

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

当您导航到/ courses时，您将被静默重定向到Courses / 0。 结果是，带有to="nodes" Link组件将始终重定向到课程/编号/节点-因为实际上无法再访问课程/位置。 每个不包含course_id的URL将被重定向到course_id = 0

请注意，这2条路由应以正确的顺序放入Switch ，否则每次都将导致重定向...

我尚未对此进行测试，但它应该可以完成此工作：

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

这应该处理/ course / course_id

现在，如果要嵌套/ course /：course_id / nodes /：node_id路由，则应将其放入父路由所呈现的组件中。

让我们将父路由修改为：

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

这不仅是渲染通过的组件，还渲染了组件并向下传递了Router道具。 这意味着渲染的组件将能够处理路线！

现在，在内容组件中：

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

我们需要做的最后一件事是更改Link组件的to属性，以便它将重定向到目标节点：

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

这有意义吗？ 我可能已经在您的代码中错过了一些陷阱-您想要实现的目标就在这里，但是您可能需要对其进行一些调整...