Question

如何制作嵌套路线???

我希望初始路线为课程/：course_id？之后，当我点击一个节点时，我希望我的网址成为课程/：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，Link用于设置它。

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

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

这可以通过来自Redirect的{{1}}来实现。

如果您创建以下路线：

react-router-dom

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

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

导航到/ courses时，您将被静默重定向到courses / 0。结果是您的<Route path="/course/:course_id" component={Content}/>链接组件将始终重定向到课程/数字/节点 - 因为有效的课程/位置将不再可用。每个不包含course_id的URL都将重定向到course_id = 0

请注意，这两条路线应放在to="nodes"中，并且顺序正确，否则每次都会重定向......

我没有对此进行过测试，但它应该完成这项工作：

Switch

这应该处理/ course / course_id

现在，如果你想嵌套一个/ course /：course_id / nodes /：node_id Route，它应该进入由父路由呈现的组件。

让我们将我们的父路线重写为：

...
<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}/> }属性，以便它将重定向到目标节点：

to

这有意义吗？我可能已经错过了你的代码中的一些问题 - 你想要实现的想法就在这里，但你可能需要对它进行一些调整......

React-router.Nested路由

1 个答案: