React Router

We have covered in detail about components which are basic building blocks of any react application. Next topic is routing, In Single Page Applications routing is done on client side. We use a library called react-router for navigating from one view to another view

React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.

Note: This tutorial is based out of v3.0.2

Please refer react-router docs for more information on API.

For basic routing configuration we are going to use Router, Route and IndexRoute components from library.

Router is the main level route component under which we define all the routes needed for the application. It accepts histroy parameter to track the navigation between paths. There are two types of history.

hashHistory: Your path contains '#' symbol immediately after your application context indicating that all the routes after has are being served by a client.

browserHistroy: This gives you a clean URL without any differentiation between client and server URLs. However, there will be some server-side changes needed to handle routes that were not defined to navigate to index.html to make sure your application doesn't throw 404 error. It also accepts routes as an object which defines a map between paths and components.

Route: Route component takes two attributes path and component. path is the part of URL and component is the corresponding UI component for the path.

IndexRoute: It takes a single attribute component. It tells which component is by default displayed for a particular route.

const { Router, Route, IndexRoute, Link, hashHistory } = ReactRouter
class MainLayout extends React.Component {
    render() {
        console.log(this.props.children)
        return (
            <div className="container">
                <header>
                    <ul className="nav">
                        <li><Link to="/home">Home</Link></li>
                        <li><Link to="/resume">Resume</Link></li>
                        <li><Link to="/contact">Contact</Link></li>
                    </ul>
                </header>
                <div className="main">
                     {this.props.children}
                </div>
                <footer>&copy; 2017 Anand Rikka</footer>
            </div>
        )
    }
}

// ReactDOM.render(<MainLayout />, document.getElementById('app'));

class HomeComponent extends React.Component {
    render() {
        return (
            <div>
                <h2>Home Component</h2>
            </div>
        )
    }
}

class ResumeComponent extends React.Component {
    render() {
        return (
            <div>
                <h2>Resume Component</h2>
            </div>
        )
    }
}

class ContactComponent extends React.Component {
    render() {
        return (
            <div>
                <h2>Contact Component</h2>
            </div>
        )
    }
}

const routes = (
    <Router history={hashHistory}>
        <Route path="/" component={MainLayout}>
            <IndexRoute component={HomeComponent}/>
            <Route path="home" component={HomeComponent} />
            <Route path="resume" component={ResumeComponent} />
            <Route path="contact" component={ContactComponent} />
        </Route>
    </Router>
)

ReactDOM.render(routes, document.getElementById('root'));

Link is the component we use to navigate from one route to another.

There is another way of providing routes for the Router component. using routes attribute.

const routes = {
    path: '/',
    component: MainLayout,
    indexRoute: HomeComponent
    childRoutes: [
        {
            path: 'home',
            component: HomeComponent
        },
        {
            path: 'resume',
            component: ResumeComponent
        },
        {
            path: 'contact',
            component: ContactComponent
        }
    ]
}

<Router history={hashHistory} routes={routes}/>