React Router Basics

Pradeep Dayaram
Jul 25, 2017 · 5 min read

React Router has developed a system to help us handle client side routing in our React Applications. Here we will review some of the basics to get started with React Router in your React App. We will be reviewing the newest version which is v4. You can click here to review the documentation. I have limited experience using it, but I hope to provide you with some information to help you get started.

Getting Started:

The first step to is to import the ‘react-router-dom’ which you can do by running the following command within the directory of your react app:

npm install react-router-dom //If you are using yarn yarn add react-router-dom

Once it is installed, you can start to use the React Router like any other React component. As such, you will have to import them into the file in which you will be using them. Here we are importing three components, Router, Route, and Link from React Router. These components will help us create our Routes, and Links for our website.

Example:

import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'

const Example = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<Route path="/" component={Home}/>
<Route path="/topics" component={Topics}/>
</div>
</Router>
)
export default Example

In the above example we have a presentational component that renders an unordered list of links. The Links themselves are a component that we are given access to by React Router. We can use access it because of our import code we have up top. Using the above syntax we can create our links and route them appropriately.

Below the Links we have our Route component that is also given to us by React Router. Here we can assign paths to render specific components. The flow would begin with a user clicking on a Link component that has a designated path. From there our Routes match the path that has been requested. Once the Route component gets matched it then knows to render the component that we passed in. The Route component is what is responsible for rendering the corresponding component.

This is the basic framework to set up React Routes in your App. Each one of these elements gets a bit more complex, and has many add ons that you can take advantage on. The documentation that is available is very helpful and they give you a lot of examples. You can be very precise with what Routes render, and if they should render a specific component given certain parameters. As an example, lets review some of the render methods available for the Route component as an example.

There are three render methods available to the Route component; component, render, and children methods. I have only used two of them so far, specifically component and render. These methods will be responsible for calling on the designated component if the route is visited. There are some differences as to how this happens depending on the render method that you choose. For example, if you select the component method it will unmount and remount the component every time, which may have an effect on your Dom tree. Another big difference between the two methods is that render will allow you to pass in additional props through a callback function. Lets look at some examples below:

The Component method:

<Route path="/cocktails" component={CocktailDetail} />

The Render method:

<Route path="/cocktails" render={()=>(
<CocktailDetail
fetchCocktail={this.fetchCocktail}
cocktails={this.state.cocktails}
/>
)}
/>

As you can see with the above examples, the component method does make for very clean code. The tradeoff however is that inability to pass on extra props if your component may need them. In the example above I was working on a project where we created a list of links for cocktail drinks. When creating the Route we found that using the render method gave us more flexibility to pass on additional information that we needed to achieve the functionality that we were looking for. Most of our information handling was happening at a parent component level and because of that the data needed to be passed down. However if information was being handled at the same level of the component that was being displayed, using the component method would be fine. Like many things with React it comes down to how your project is structured. Another feature that I had an opportunity to explore was the exact path when setting up your Routes, lets review that below.

Exact path:

Another take away from my current use with the React Router is the use of the exact keyword when defining your the paths within your Route components. Using the exact keyword will give us more control as to what will be rendered on the screen. Lets take a look at the example below:

Not using the exact keyword:

<Route path="/" component={Home}/>
<Route path="/topics" component={Topics}/>

With this example we have two routes, each of which includes the “/” in their definition. The Home component here will be rendered when we visit the “/”, and when we visit the “/topics”. This is because the “/” is part of both routes. This is a helpful way of being able to display multiple components on the screen. For example if you had a Nav bar, we can ensure it will remain visible regardless of what path the browser may be viewing.

Sometimes however we may want to render one specific component on the screen, or maybe a collection of specific components. This is when you want to use the exact keyword when defining your path in the Route component.

Using the exact keyword:

<Route exact path="/" component={Home}/>
<Route path="/topics" component={Topics}/>

In this scenario the Home component will be displayed as before when we visit our root path “/”. The difference will come when we visit our “/topics” path. Since we are using the exact keyword our Router will match the route exactly and only render the Topics component. With this set up we can only view one component at a time on the page. Using the exact keyword gives us more control of the flow of the components. This topic begins to scrape the surface in regards to setting up nested routes, and how we can ensure that certain components are always displayed together.

Summary:

So far React Router has been my first experience of client side rendering. I am very surprised as how much our experience online relies on the browser and not the internet speed it self. It is very impressive how browsers come equipped to store much of the information that we as developers need to create a seamless user experience.

This blog barely scrapes the surface of what React Router is capable of, but I hope it was enough to get you started with some of the syntax and structure. For more detailed information and more examples click here to checkout the documentation.

Hope that this was helpful, and that your React Router Journey is a great one!

Resources:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade