Getting started with React router

Hi, folks!

Let’s talk about routing in React.

At the beginning of the React era it routing was quite tricky, people suffered trying to reinvent the wheel, but then React Router project came into the place and changed things to better. In the article was covered “Quick Start” guide to working with React Router from zero to one.

First of all you need to add routing to npm dependencies:

npm install --save react-router

Once we are done, we would need to define routes in the root component.

// First let's import dependencies
import React from 'react';
import Router, {Route, Redirect} from 'react-router';

/* import or define MainPage, Dashboard, List and Item components here  */  

// Create routing tree with routes and nested subroutes
const routes = (
  <Route path='/' handler={MainPageComponent}>
    <Route name='dashboard' path='/' handler={DashboardComponent}/>
    <Route name='item' path='list/:itemId' handler={ItemComponent}/>
    <Route name='list' path='list' handler={ListComponent}/>
  </Route>
);

// And connect React by rendering Handlers to the simple React component
Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

Here we created root component, that would allow us to use a component that match to current route or subroute. The code was written according to ES6 JavaScript spec and correctly works with all browsers with Webpack and Babel setup.

Also, we need to define what thing called RouteHandler. It’s a placeholder for all your child components, they will be rendered as a child a component of RouteHandleraccording to current route or subroute.

For example in case of MainPageComponent:

// We still need to import deps 
import React from 'react';
import {RouteHandler} from 'react-router';
// Define React component
const MainScreen = React.createClass({
  render () {
    return (
      <div id='conainer'>
        <section>
          <YourHeaderComponent/>
           { /* Add Route handler for each level of routing */ }
          <RouteHandler/>
        </section>
      </div>
    );
  }
});
export default MainScreen;

And that’s it!
Now we have the setup that can render components according to the path changes.

Probably you want to have some ways to manipulate routes and switch between pages from the code. For doing that, you need just add contextTypes to the React component.

For example in DashboardComponent

import React from 'react';
const DashboardComponent = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },
  render () {
      // And here we go, router object is appears in the context 
      const router = this.context.router;
      return (
          <div>Render your stuff here</div>
      );
  }
});
export default DashboardComponent;

Also your can use <Link/> to navigate to another component by the name defined as in the example above.

Hope that React router introduction helped you, for more info, please visit:
React Router docs.

Got a question?

Feel free to ask me on Twitter or Github or subscribe for next articles.