React Router: A Beginner's Guide with Examples

React Router is a popular, open-source library for handling routing in React applications, allowing you to create single-page applications (SPAs) seamlessly.

In this tutorial, we'll cover the basics of React Router and how to set it up in your application!

Prerequisites

Before you get started, you should have a basic understanding of React and have an application already set up. If you haven't done so, visit this tutorial first to create a new React application then come back!

Installation

To get started, we'll need to install it as a dependency within our project. We can use either npm or yarn to accomplish this. Just open a command prompt window and navigate to your project's root directory:

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

Setting Up React Routes

Now that the router is installed, we can start setting up routes within our application. Routes define which React components should be rendered for specific URLs. Typically, you would define your routes in the main component of your application, such as App.js.

To import the necessary components from react-router-dom library, add the following code snippet:

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

Next, we'll wrap our entire application with the Router component:

function App() {
	return (
		<Router>
			/* Application content here */
		</Router>
	);
}

Inside the Router tag, we'll add the Switch component to define our routes, which ensures that only one route is rendered at a time:

function() {
	return (
		<Router>
			<Switch>
				/* Define routes here */
			</Switch>
		</Router>
	);
}

Finally, we can define individual routes using the Route component. Each route should specify a path value and the associated component to be rendered when the page URL matches.

In this example, we'll set up three routes:

• / - The homepage
• /about - An about page
• /contact - A contact page

import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
	return (
		<Router>
			<Switch>
				<Route path="/" exact component={Home} />
				<Route path="/about" component={About} />
				<Route path="/contact" component={Contact} />
			</Switch>
		</Router>
	);
}

Navigation

Now that our routes are defined, we need to create a way for users to navigate between each page.

First, we'll import the Link component from the installed react-router-dom library:

import { Link } from 'react-router-dom';

Then, we'll use this component to create navigation links in our application:

function App() {
	return (
		<Router>
			<nav>
				<ul>
					<li>
						<Link to="/">Home</Link>
					</li>
					<li>
						<Link to="/about">About</Link>
					</li>
					<li>
						<Link to="/contact">Contact</Link>
					</li>
				</ul>
			</nav>
			
			<Switch>
				<Route path="/" exact component={Home} />
				<Route path="/about" component={About} />
				<Route path="/contact" component={Contact} />
			</Switch>
		</Router>
	);
}

The to prop in the Link component specifics the path to navigate to when the link is clicked. This keeps your app's navigation in sync with the active page URL.

Accessing Route Parameters

Sometimes, you may need to access route parameters, like dynamic IDs, in your components. React Router makes this easy by allowing you to define dynamic routes.

To do this, we'll add a path parameter placeholder :id, that can match any value in the URL matching this format:

<Route path="/user/:id" component={UserProfile} />

We'll then access the route parameter in the component using the useParams hook or withRouter HOC (Higher Order Component) if you're using class components:

import { useParams } from 'react-router-dom';

function UserProfile() {
	const { id } = useParams();
	
	return (
		<div>
			<h2>User Profile</h2>
			<p>User ID: {id}</p>
		</div>
	);
}

Redirects

You can also set up redirects using the Redirect component. In this example, if the user visits "/old-url", they will be redirected to "/new-url."

import { Redirect } from 'react-router-dom';

function App() {
	return (
		<Router>
			<Switch>
				<Route path="/old-url">
					<Redirect to="/new-url" />
				</Route>
				<Route path="/new-url" component={NewPage} />
			</Switch>
		</Router>
	);
}

Nested Routes

Nested routes in React Router allow you to define a hierarchical relationship between different components and their routes. This is useful for creating layouts where some components remain persistent (like headers or sidebars) while others change based on the current route.

To accomplish this, we'll define our nested routes by placing a Switch component within another Route. In this example, the Dashboard component will serve as a layout for the nested routes:

<Route path="/dashboard">
	<Dashboard>
		<Switch>
			<Route path="/dashboard/profile" component={Profile} />
			<Route path="/dashboard/settings" component={Settings} />
			<Route path="/dashboard/messages" component={Messages} />
		</Switch>
	</Dashboard>
</Route>

Wrapping Up

React Router is a super powerful library for handling routing in your applications. Follow the steps we covered above to set up routes, navigation, route parameters, redirects, and nested routes.