React-router

[sohilpandya]

React Router Tutorial

Installation Steps

• Install React Router npm i react-router --save

Navigate to app.js or route js file

import {Router, Route, hashHistory} from 'react-router' //es6

var Router = require('react-router').Router //es5
var Route = require('react-router').Route //es5
var hashHistory = require('react-router').hashHistory //es5

Inside the app.js render method, replace your exisiting component with the Router component as such:-

  <Router history={hashHistory}>
    <Route path="/" component={App}/>
  </Router>

Add another Route

Add additional components for which you want to add routes for

about.jsx
contact.jsx

<Route path="/about" component={about}/>
<Route path="/contact" component={contact}/>

Now visit hostname:3000/#/about & hostname:3000/#/contact to view the additional paths

Navigate with Link

Add a link to an element

import {Link} from 'react-router' //es6

var Link = require('react-router').Link //es5

Now add a link element to link to a route

<h2><Link to="/about">About</Link><h2>

Your h2 tag will now navigate you to About component

*###### You cannot pass down a string, you have to pass an object with pathname as found in example: - http://stackoverflow.com/questions/30115324/pass-props-in-link-react-router

Nested Routes