Basic intro to React Router v4

https://unsplash.com/collections/142624/routes?photo=_QoAuZGAoPY

I recently started working on a React project that called for one component being hidden until a button was clicked on another component. Seems easy enough. I know jQuery could do something like add a CSS class that hides the component at page load and then makes it visible when needed. However, I wanted to stay within the realm of React as much as I could. Seemed like a job for React Router.

React Router is a package that allows you to configure routes that show only the components you specify on the page depending on the route. For example, if you have a long list of movies and only want to show the user’s favorites when they click on a ‘favorites’ button, you can do that with React Router.

It had been a bit of time since I used it last so I had to go over some notes and tutorials to get the hang of it again. Here is a simple example I came up with to help with some of the concepts.

The example I’m using was created with ‘create-react-app’ and then I pruned the files that weren’t necessary. The file structure looks like this.

/app
  /components
    App.js
  index.css
  index.html
  index.js
/node_modules
package.json

Note that the ‘App.js’ file has two components (Title and List). I could break those out into their own files, but wanted to keep this example as simple as I could.

Installing React Router

React Router can be installed via npm and the ‘react-router-dom’ package. I’m using this particular package since I’m writing something for the browser. There is also a package for React Native. Both of these install the ‘react-router’ package as a dependency.

npm i react-router-dom --save

React Router components

React Router includes several components but the three I’ve used the most are <BrowserRouter>, <Route>, and <Link>. The first one, <BrowserRouter>, is usually given an alias of ‘Router’ and this is the parent component that is used to store all of your <Route> components. The <Route> components are what tell your app which other components to display based on the route. And <Link> components are how you create links to those different routes.

Example code

I like to put my <Router> and <Route>components at the top level of my apps so I can keep them organized. In this example, I keep them in the ‘index.js’ file as what gets rendered by calling ReactDOM.render().

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Title, List } from './components/App';
import './index.css';
ReactDOM.render(
  <Router>
      <div>
        <Route exact path="/" component={Title} />
        <Route path="/list" component={List} />
      </div>
  </Router>,
  document.getElementById('app')
)

Here I have the <Router> component with a child div since that component can only have one child. Then in that div I place all of the routes needed for the example. Each <Route> component needs a path which is the URL and then a component that you want rendered when navigating to that path.

In this case, since I have specified the ‘exact’ parameter, only the <Title> component will be rendered on the root route “/” and only the <List> component will be rendered on the “/list” route. If I wanted <Title> to be displayed on both routes then I can remove the ‘exact’ parameter. Then when navigating to “/list” it would match both “/” and “/list”.

The ‘App.js’ file in this case just contains the two components. Those each contain a <Link> component with a “to” argument pointing to the appropriate route

//App.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
const Title = () => {
  return (
      <div className="title">
        <h1>React Router demo</h1>
        <Link to="/list"><button>Show the List</button></Link>
      </div>
  )
}
const List = () => {
  return (
    <div className="nav">
      <ul>
        <li>list item</li>
        <li>list item</li>
      </ul>
      <Link to="/"><button>Back Home</button></Link>
    </div>
  )
}
module.exports = {
  Title,
  List
};

Since I’m not dealing with state or props or ‘this’ in this example I just made them stateless functional components. ES6 classes would work the same way.

The results

As written, the example only displays one component at a time and each has a button that switches back to the other. I added a bit of CSS just to help keep them apart visually. Also note the route changes in the address bar.

Two components with two routes.

As I said before, if I wanted to show both components at the same time, all I have to do is remove the ‘exact’ parameter from the first <Route> component. If I do that, then it looks like this.

//App.js
...
<Route path="/" component={Title} />
...

The title is always displayed.

This is a very basic example on the concepts behind React Router and the use of some of the components included with it. Please see the docs at reacttraining.com for more information and more complex examples. I hope this helped in some small way and if you enjoyed it please leave a clap (or whatever system Medium uses when you read this) or a comment below. Thanks for reading!