React - Router v4

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:

• The <BrowserRouter> creates a browser history. It uses the HTML5 history API (pushState, replaceState and the popstate event)
• the <HashRouter> creates a hash history,
• and the <MemoryRouter> creates a memory history.

Example:

<BrowserRouter>
  <div>
    .....
  </div>
</BrowserRouter>

Route

doc

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;

• http://localhost:8080/#/about is the url for About

Link

React Router comes with a component that lets you navigate around your application.

Link is almost identical to the a tag, except that:

• it's aware of the Router (the back and forward browser action are working)
• it knows if the path it links to is active so you can style it differently (activeClassName or activeStyle attribute)

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>
    )
  }
})

• The rendering when clicking is

// at /about
<App>
  <About/>
</App>

// at /repos
<App>
  <Repos/>
</App>

NavLink

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>

URL Params

Consider the following URLs:

/repos/reactjs/react-router
/repos/facebook/react

These URLs would match a route path like this:

/repos/:userName/:repoName

where:

• :name are URL parameters whose values will be made available to route components on this.props.params[name].