React-router: Question about Nested Routes

[GibranPolonsky]

"react": "15.3.2",
"react-router": "4.0.0-alpha.4"

How can i create nested routes ?
i tried with
<Match routes={[ {pattern: '/signin', component: Signin}, {pattern: '/test', component: Test} ]} />

but is still not working.

[achung89]

I believe the 'Match' API has been changed back to 'Route'. You can refer to the docs for more details.

[ryanflorence]

the basic example has nested routes: https://reacttraining.com/react-router/examples/basic. It's all Just Components™ so you nest routes by ... well ... nesting them. It's like asking how to nest divs :P

[stoplion]

I'm not seeing any examples or nested <Route> in that link.

[timdorr]

@stoplion Look at the Topics component

[ryanflorence]

Routes nest with the UI. It's hard to explain because there is nothing really to explain anymore :P

[EvHaus]

@CusProjects @stoplion I too found the docs and the basic example confusing as it didn't really show the wrong way to do it. In hopes that others find this thread here is how I understand nested routes:

1. <Route /> components should not be nested when defined. eg:

// This won't work.
<Route component={About} path="/about">
    <Route component={AboutMe} path="me" />
    <Route component={AboutYou} path="you" />
</Route>

1. <Route /> must use absolute path values, eg:

// This will work
<Route component={About} path="/about" />
<Route component={AboutMe} path="/about/me" />
<Route component={AboutYou} path="/about/you" />

1. If you want to nest routes to share UI then you must nest the <Route /> component inside the component class of the top-level <Route />, eg:

// First define the top-level route
<Route component={About} path="/about" />

// Then inside your `About` component you can return a nested `<Route />`

class About extends Component {
   render () {
      // Note that the `path` must still be absolute
      return <Route component={AboutMe} path="/about/me" />
   }
}

[sckoh]

@EvHaus thanks, number 3 is working. The migration does not mention about the need of using full absolute path in nested routes