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}/>

這有意義嗎？ 我可能已經在您的代碼中錯過了一些陷阱-您想要實現的目標就在這里，但是您可能需要對其進行一些調整...