React Router is a routing service that can runs:
If you are writing an application that will:
# It contains a binding with DOM + react router
npm install --save react-router-dom
npm install --save react-router
A React router is a component that's not going to display anything until we configure a route.
In v4, there is 3 type of router:
Example:
<BrowserRouter>
<div>
.....
</div>
</BrowserRouter>
import { BrowserRouter, Route } from 'react-router-dom'
render((
<BrowserRouter>
<div>
{/* add the routes here */}
<Route path='/about' component={About} />
<Route path='/contact' component={Contact} />
</div>
</BrowserRouter>
), document.getElementById('app'))
where;
React Router comes with a component that lets you navigate around your application.
Link is almost identical to the a tag, except that:
Example:
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><Link to="/about" activeStyle={{ color: 'red' }} >About</Link></li>
<li><Link to="/contact" activeClassName="active" >Contact</Link></li>
</ul>
{/* add this */}
{this.props.children}
</div>
)
}
})
// at /about
<App>
<About/>
</App>
// at /repos
<App>
<Repos/>
</App>
NavLink is a link aware of the history. It can add a special class activeClassName or activeStyle when the link is the actual browser path.
Example:
import { NavLink } from 'react-router-dom'
<NavLink to="/about" activeClassName="selected">About</NavLink>
Consider the following URLs:
/repos/reactjs/react-router
/repos/facebook/react
These URLs would match a route path like this:
/repos/:userName/:repoName
where: