React Redux Router v3 Routing

Home

Generic React - Routing

config.router

- config.router.routes : Route

import routes from './routes';

const config = {
    // ...
    router: {
        routes: routes
    },
    // ...
};

export default config;

Routing is at the heart of many single page applications. Because Linc needs access to your routes, you can't simply add the routing to the render() function in index.js. In stead, you should create a new file called routes.js (or something similar) in src/. Here is an example of what this could look like:

import React from 'react'
import { Route } from 'react-router'
import App from './App'
import Profile from './containers/Profile'
import Repo from './containers/Repo'

const routes = 
    <Route path=''>
        <Route path="/" component={App} />
        <Route path="profile" component={Profile} />
        <Route path="repo/:name/:repo" component={Repo} />
    </Route>;

export default routes

This particular example is from one of the Linc demo applications, which allows you to view a GitHub user's list of public repositories, as well as details about those repositories. It is a simple application, and has only three routes: the home page (App), a profile page (Profile), and a repository page (Repo).

Make sure you install react-router (version 3) in your project:

npm i react-router@^3 -S

If you have created your project using create-react-app, your index.js will look something like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
    <App />, 
    document.getElementById('root')
);

(There may be service workers mentioned in your version of the file; if so, just keep them. It is outside the scope of this Wiki, though, so we left them out for clarity.)

You'll notice that App is included here, however we did mention it in routes.js. Also, we haven't yet included anything related to the routing in index.js. So let's fix this. Let's first get Router and browserHistory from react-router:

import { Router, browserHistory } from 'react-router'

Naturally, we'll have to include the actual routes:

import routes from './routes'

Finally, let's update the render() function so we actually can start using the router:

ReactDOM.render(
    <Router
        routes={routes}
        history={browserHistory} />,
    document.getElementById('root')
);

So far, we have basically only added routes to the project. However, we haven't added anything to the Linc configuration file.

In order to use Linc, we need to include the configuration file somewhere. We will do this inside index.js. Somewhere at the top of index.js, add the following line:

import config from './linc.config.js'

As we've shown in the introduction of this page, we include the routes inside the configuration file as part of the router section inside the config. This subsequently means that we no longer have to include the routes directly. So, you can remove the line import routes from './routes'; However, we still need to access the routes, and we will use the config to do this. Here is the render() function again:

ReactDOM.render(
    <Router
        routes={config.router.routes}
        history={browserHistory} />,
    document.getElementById('root')
);

In stead of simply using the routes directly, we use the router from the configuration object: config.router.routes. No need to include the routes directly anymore, obviously.

Next: Getting State