javascript - React-router.嵌套路由

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 时，会将我重定向到类(class)/节点并跳过: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，链接用于设置它。

Link 不知道 Route，Route 也不知道 Link。 Link 将 URL 设置为 to 中指定的内容。因此，如果您当前的 URL 是/course，并且 to="nodes"，则结果是/course/nodes。如果是 to="0/nodes"，结果将为/courses/0/nodes。

现在，如果我理解正确的话，你总是想要一个介于“/courses”和“/nodes”之间的数字，对吗？

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

如果您创建以下路由:

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

并修改之前的路线，使 course_id 不再可选

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

当您导航到/courses 时，您将被静默重定向到 course/0。结果是，带有 to="nodes" 的链接组件将始终重定向到类(class)/编号/节点 - 因为实际上类(class)/位置将不再可访问。每个不包含 course_id 的 URL 将被重定向到 course_id = 0

请注意，这两条路由应该放在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 props。这意味着渲染的组件将能够处理路由!

现在，在内容组件中:

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

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

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

这有道理吗？我可能错过了你的代码中的一些陷阱 - 你想要实现的想法就在这里，但你可能需要稍微调整一下......