Multiple Nested Routes in react-router-dom v4
Use the url/path match obtained from props this.props.match.path
to get the path that is set to a component.
Define your main routes as below
<Router> <div> <Route exact path="/" component={DummyIndex} /> {/* Note-1 */} <Route path="/login" component={Login} /> <Route path="/home" component={Home} /> <Route path="/about" component={About} /> <Route path="/etc" component={Etc} /> </div></Router>
Then in Home
Component, define your routes
class Home extends Component { render() { return <div> <Route exact path={this.props.match.path} component={HomeDefault} /> <Route path={`${this.props.match.path}/one`} component={HomePageOne} /> <Route path={`${this.props.match.path}/two`} component={HomePageTwo} /> </div> }}
The defined routes are as below
- /login
- /home
- /home/one
- /home/two
- /about
- /etc
If you want to nest routes further in HomePageOne
like /home/one/a and /home/one/b, you can proceed the same approach.
Note-1: If you don't want further nesting, just set the route with prop exact
.
EDIT (May 15, 2017)
Initially, I've used props.match.url
and now I changed it to props.match.path
.
We can use props.match.path
instead of props.match.url
in Route's path so that if you use path params in top level routes, you can get it in inner (nested) routes via props.match.params
.
If you don't you any path params, props.match.url
is enough
Use Switch component in router v4
<Router><Switch> <Route path='/login' component={Login} /> <Route path='/about' component={About} /> <Home> <Route component={({ match }) => <div> <Route path='/page1' component={Page1} /> <Route path='/page2' component={Page2} /> <Route path='/page3' component={Page3} /> </div> }/> </Home></Switch>
export default class Home extends Component {render() { return ( <div className="Home"> { this.props.children } </div> ) }}
I think this code shows the basic idea of using component.
This week I had the same problem, I think the project is passing for time of confusion because all the documentation, examples and videos are for the previous versions and the docs for the version 4 are confusing
This is how I get the things done, let me know if this help
import React, { Component } from 'react';import { BrowserRouter, Route, Switch } from 'react-router-dom';import Root from './Root';import Home from './Home';import About from './About';import './App.css';class App extends Component { render() { return ( <BrowserRouter> <div> <Root> <Switch> <Route exact path="/" component={Home} /> <Route path="/home" component={Home} /> <Route path="/about" component={About} /> </Switch> </Root> </div> </BrowserRouter> ); }}export default App;