Multiple Nested Routes in react-router-dom v4
Move all childs routes to parent component and extend route like below. <Route path={`${match.url}/keyword`} component={Topic}/>
also check react router training
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
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;
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.