Intro to React Routing

A Beginner’s Guide to Setting Up Routes with React

Photo by Benjamin Voros on Unsplash

After 5 months in the Flatiron School’s software engineering problem, it was finally time to start my final project. My assignment was to create a single page application with a React/Redux frontend and a Rails API backend. One of the first hurdles I came across while setting up my React frontend (aside from wrapping my head around the wonderful yet intimidating world of React) was enabling routing.

For this article, I’ll be explaining the basics of routing for any newbie React developers.

To Begin

Assuming you have an initial React app setup, you’ll need to install React-Router.

npm install react-router-dom

Importing Routes

Navigate to App.js.

First, we’ll need to import two components from react-router-dom, BrowserRouter and Route.

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

By convention, BrowserRouter is commonly renamed as Router. The syntax BrowserRouter as Router can be used to achieve this.

Setting up Routes

Now that we are importing the necessary components, let’s set up some routes.

import React, { Component } from 'react';
import Home from './Home';
import About from './About';
import Login from './Login';
import {
   BrowserRouter as Router,
   Route
} from 'react-router-dom';
class App extends Component {
   render() {
      return (
         <Router>
            <div className="App">
               <Route path="/" component={Home} />
               <Route path="/about" component={About} />
               <Route path="/login" component={Login} />
            </div>
         </Router>
      );
   }
}
export default App;

Notice that nested under Router are our Route components. The Route component has two props. The first prop path specifies the URL. The second prop component identifies the React component to render at the specified path.

Note: <Router> can only have one child element, which means that all <Router> components must be wrapped in a <div> tag.

Exact Path

The current state of the code has an issue. The Home component will render at all routes! How do we remedy this? With exact.

<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/login" component={Login} />

Add exact before the path prop. Now, each component will only render if the URL exactly matches the specified path.

Switch

Another possible tool when setting up React routes is switch.

import { 
   Switch, 
   Route 
} from 'react-router-dom';
<Switch>
   <Route path="/todos/:id" component={Todo} />
   <Route path="/todos" component={TodoContainer} />
   <Route path="/" component={Home} />
</Switch>

Note that route order is important when using switch. The most specific route must be positioned first, since switch will only render the first component whose path matches the current URL.

For example, if the routes were written as below:

<Switch>
   <Route path="/" component={Home} />
   <Route path="/todos" component={TodoContainer} />
   <Route path="/todos/:id" component={Todo} />
</Switch>

No matter what URL you navigated to, only the Home component would render.

Conclusion

React can be quite overwhelming at first, it sure was for me. But I hope this short guide helps you along in your React journey.

Happy coding!