React Router
React Router 4
react-router
, react-router-dom
For webbrowser based project, use react-router-dom
- DOM bindings for React Router.
react-router-dom
// using ES6 modules
import { BrowserRouter, Route, Link } from 'react-router-dom'
// using CommonJS modules
var BrowserRouter = require('react-router-dom').BrowserRouter
var Route = require('react-router-dom').Route
var Link = require('react-router-dom').Link
Routes
In a main component:
render () {
return (
<Switch>
<Route exact path='/landing' component={Landing}/>
<Dashboard>
<Route path='/dashboard' component={Main}/>
<Route path='/users' component={Users}/>
</Dashboard>
<Route exact path='/' component={Login}/>
</Switch>
)
}
Links
Add to a component:
render () {
return (
...
<Link to='/main'><Logo /></Link>
...
)
}
Redirecting
Add to a component:
render () {
return (
...
{this.state.login && <Redirect to='/download' />}
...
)
}