Skip to content
Routing Example with React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.eslintrc
.gitignore
.jshintrc
LICENSE
README.md
devServer.js
index.html
package.json
webpack.config.dev.js
webpack.config.prod.js

README.md

React Routing Example

Installation

npm install
npm start
open http://localhost:3000

Set up in your own project

First install the react-router package as a dependency:

npm install --save react-router

Then set up the routes in your entrypoint:

// src/index.js

// Import the Routing classes
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router';

// Import your own components to use in the `render()` function below
import App from './App';
import Welcome from './Welcome';
import About from './About';
import Projects from './Projects';
import Project from './Project';
import PageNotFound from './PageNotFound';

// Set up your routes
ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>                           // everything will be under the `App` component
      <IndexRoute component={Welcome} />                       // the `Welcome` component will be rendered on `/`
      <Route path="/projects" component={Projects}/>           // the `Projects` component will be rendered on `/projects`
      <Route path="/project/:projectId" component={Project}/>  // the `Project` component will be rendered on `/project/<id>`
      <Route path="/about" component={About}/>                 // the `About` component will be rendered on `/about`
      <Route path="*" component={PageNotFound}/>               // all other routes will render `PageNotFound`
    </Route>
  </Router>
), document.getElementById('root'));

Now, we need to tell the App component to render the component passed on by the Router and we can add links to other paths by using the Link component from React Router.

// src/App.js

import React from 'react';
import { Link } from 'react-router';

class App extends React.Component {
    render() {
        return (
          <div className="container">
            {/* Render some links to navigate */}
            <nav className="main">
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/projects">Projects</Link></li>
                <li><Link to="/about">About</Link></li>
              </ul>
            </nav>

            {/* Render the component passed on by the Router */}
            {this.props.children}
          </div>
        );
    }
}

export default App;

Accessing Route params

In our project route, we defined a projectId to be passed on in this way:

      <Route path="/project/:projectId" component={Project}/>  // the `Project` component will be rendered on `/project/<id>`

To access that projectId, we can use the props.params of the component, so in this case we can get the id passed in as:

// src/Project.js

this.props.params.projectId
You can’t perform that action at this time.