ReactRouter
React Router
ReactDOM.render((
<Router history={browserHistory}>
<Route path='/' component={Users} />
<Route path='/other' component={Other} />
</Router>
), document.getElementById('root'))
history
is required.
What we did above is we mounted a Router to the DOM, it is now going to take Routes. A route takes a path (URL) and shows a component on that path.
Link
If you want to navigate anywhere within the site, you use Link
. You’ll only use actual href
when you want to move away from the site. A link looks like this:
<Link to='/other'>Other</Link>
You will not be making any server requests to go to any of these different links/pages.
Nested Routes
You can have nested routes just like you can have nested components
ReactDOM.render((
<Router history={browserHistory}>
<Route path='/' component={Main}>
<Route path='/users' component={Users} />
<Route path='/other' component={Other} />
</Route>
</Router>
), document.getElementById('root'))
What the could above will do is that it’ll load the Users route/component inside the Main route/component.
IndexRoute
IndexRoute
let’s you render props.children
. It’s aimed at setting a default UI that opens when you are at the route.
ReactDOM.render((
<Router history={browserHistory}>
<Route path='/' component={AppLayout}>
<IndexRoute component={Users} />
<Route path='/other' component={Other} />
</Route>
</Router>
), document.getElementById('root'))
Props
You can also pass props, like so:
ReactDOM.render((
<Router history={browserHistory}>
<Route path='/' component={AppLayout}>
<IndexRoute component={Users} />
<Route path='/profile/:id' component={UserProfile}} />
</Route>
</Router>
), document.getElementById('root'))