React-router.Nested路由

Question

How to make nested routes???

I want initial route to be course/:course_id? after that, when i click on a node I want my url to become course/:course_id?/nodes/:node_id .

I use : "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>

    );

When i click id redirects me to course/nodes and skips :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

I think you have some concepts mixed up... Route is for handling received URLs, Link is for setting it.

Link does not know about Route, Route does not know about Link. Link sets the URL to what is specified in to . So if your current URL is /course, and to="nodes" , the result is /course/nodes. If it was to="0/nodes" , the result would be /courses/0/nodes.

Now if I understood correctly, you always want a number between "/courses" and "/nodes", correct?

This can be achieved with Redirect , which comes from react-router-dom too.

If you create the following Route:

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

And rework the previous route so that course_id is NOT optional

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

When you navigate to /courses, you will be silently redirected to courses/0. The result is that your Link component with to="nodes" will always redirect to courses/number/nodes - because effectively the courses/ location won't be reachable anymore. Every URL that would not contain a course_id, will be redirected to course_id = 0

Note that these 2 routes should be put in a Switch , and in the correct order, otherwise you will end up redirecting every time...

I have not tested this, but it should do the job:

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

And this should handle /course/course_id

Now, if you want to nest a /course/:course_id/nodes/:node_id Route, that should go into the component rendered by the parent route.

Let's rework our parent Route into this:

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

What this does is, instead of just rendering the passed component, it renders the component and passed down Router props. Which means that the rendered component will be able to handle routes!

Now, in the Content component:

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

The last thing we need to do is change the to property of the Link component so that it will redirect to the target node:

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

Does this make sense? I may have missed some gotchas in your code - the idea of what you want to achieve is in here, but you may have to adapt it a bit...