4 min read

Routing our Views with React Router

Create your application structure and connect your Views with React Router

What’s React Router?


React Router a JS library available thru NPM that helps mainly with 2 problems:

  • Conditional display for React components based on the current website URL.
  • Web application navigation without having to refresh.
$ npm install --save react-router

Why do I need this?


Stop reading if you are not building entire applications using React – you don’t need React-Router for single page applications or small components.

For the rest of us building real web applications, we need to connect several views (React components) into one big application. That process is called "routing."

For example, we need the following application URLs to match the following components:

react router

Defining your Application Routes


What pages/views do you want your app to have? You can always start with the basic ones:

  • Home: What your public users view when they land in yourdomain.com
  • Login/Signup/Forgot: A login form and signup form and the password remind form.
  • Private: What your private users view right after they login. The rest of the pages depend on your application and on how you want your users to navigate through your site.

react router

Mapping your Views to URLs


This is the sitemap for any typical e-commerce website:

react router

Coding your Application Routes


Once you have finished mapping your application views with URLs you can start coding everything, and that is when React-Router comes in!

The best practice is always creating one component called <Layout /> that will take care of routing the user to the specific views that it should see, depending on each of the particular URLs.

This is an example of the same e-commerce sitemap but now using React Router v4:

//this component Layout will take care of routing the URLs with all my application views 
export class Layout extends Flux.View {
    render() {
        return (
            <div>
                <BrowserRouter>
                    <div>
                        <Switch>
                            <Route exact path="/" component={Home} />
                            <Route exact path="/home" component={Home} />
                            <Route exact path="/log-in" component={Login} />
                            <Route exact path="/sign-up" component={Signup} />
                            <Route exact path="/remind" component={Remind} />
                            <Route exact path="/products" component={Products} />
                            <Route exact path="/category/:category_id" component={Category} />
                            <Route exact path="/product/:product_id" component={SingleProduct} />
                            <Route exact path="/checkout" component={Checkout} />
                            <Route exact path="/profile/:user_id" component={Profile} />
                            <Route render={() => <h1>Not found!</h1>} />
                        </Switch>
                    </div>
                </BrowserRouter>
            </div>
        );
    }
}

There are 3 components to understand here:

  • : Every time your open a new BrowserRouter tag you are basically telling React that everything that is in between must be conditionally rendered based on particular (URLs).
  • : Works similar to the switch statement in Javascript but for Routes… It tells React that the only first that matches the URL will be displayed.
  • : It’s the way that React-Router has to map routes with components, for example:
<Route exact path="/sign-up" component={Signup} />

his route is telling React that when the URL matches "sign-up," the component Signup should display.

Anchors <a> are now a Problem


Anchors take users to other websites or URLs – and that is amazing for simple plain HTML+JS – but, now we DON’T want our users to be taken to other websites or URLs. We want them to remain in the same tab but loading the next page without having to refresh. We have two possible ways of doing that:

React Router created a component that we can use instead of <a>

<Link to="/login">Take me to login</Link>

2. Using this.props.history.push(‘new/url/here’);

React Router always passes each view a prop called "history" that contains a lot of useful stuff to use when routing users. One of the many useful utilities is the "push" function that basically redirects the user to the given path.

<button onClick={() => this.props.history.push("/login")}>Take me to login</button>

Live Example:


Here is a live example using everything that we’ve learn during this reading, please click and play to understand it, learn it and replicate it: