Made withReactClip

Full React Tutorial #21 - The React Router

N

Net Ninja

Creator on the React channel

Watch on YouTube ↗

580K viewsJan 14, 20218:22 runtime

Learn to build multi-page applications in React by mastering React Router. This tutorial contrasts traditional server-side routing with modern client-side routing, showcasing how React Router improves performance by intercepting navigation and dynamically rendering components…

Chapters

#react#clip#frontend

The Problem: Single-Page Apps & Navigation

Standard React applications render a single HTML page and dynamically manipulate the DOM. To create a multi-page user experience, we need a way to manage different views or "pages" within the browser without requesting a new HTML file from the server for each navigation event. This is known as client-side routing.

Routing Models Compared

Traditional Server-Side Routing

The user requests a URL (e.g., /contact).
The browser sends a full request to a server.
The server responds with a completely new HTML document for that page.
This process repeats for every link clicked, resulting in multiple server requests and full page reloads.

React's Client-Side Routing

An initial request loads the main HTML file and all necessary JavaScript (including React and React Router).
When a user clicks a link, React Router intercepts the navigation.
It prevents a new server request from being made.
Instead, it dynamically swaps out the relevant React component for the new route directly in the browser.
This makes the application feel much faster and smoother.

Setup & Installation

React Router is a third-party library and must be installed separately.

npm install react-router-dom@5

Important
This tutorial uses Version 5 of react-router-dom for stability, as Version 6 was in beta at the time of recording. Following along with this version is recommended for compatibility.

Core Component Configuration

To set up routing, you import and use several core components from react-router-dom in your root App.js file.

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

Key Components:

<Router> (aliased from BrowserRouter): This component should wrap your entire application. It provides the routing context to all child components, enabling them to use routing features.

Tip
By placing components like a a <Navbar> outside the main routing area but inside the <Router>, they will remain visible and unchanged on every "page".
<Switch>: This component ensures that only one <Route> is rendered at a time. It will render the first child <Route> that matches the current URL path.
<Route>: This component defines an individual route.
- It uses the path prop to specify the URL path (e.g., path="/" for the homepage).
- The component you want to render for that path is nested inside the <Route> tags.

Example Implementation:

// In App.js
function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Switch>
            <Route path="/">
              <Home />
            </Route>
            {/* Other routes will go here */}
          </Switch>
        </div>
      </div>
    </Router>
  );
}

Introduction to React Router

Alright gang, so far our application only has one single page. We don't navigate around to other pages. We just have this single home page, and most websites you create are gonna have probably more than one page. So we need a way to introduce multiple different pages or routes in our React application. And the way we do this in React is with the React Router. But before we talk about how that works, let me refresh you about how a typical multi-page website works.

Traditional Server-Side Routing Explained

So then how does a typical website that's not using React handle multiple pages? Well, we generally always start in the browser by typing a URL in the address bar and hitting enter, and that sends a request to a server for that address and the server handles it. The server is generally going to send back a full HTML page, which we then view in a browser.

Now, if a user was to click on a link in that website to another page, like the contact page, it then sends a brand new request to the server, and then the server responds by sending back a new contact HTML page, and we view that in the browser. And the cycle would continue over and over and over as we click other page links in the website. So we're constantly making requests to the server for new pages.

How Client-Side Routing Works with React Router

Now, React applications don't work like this. They delegate all the routing and changing of page content to the browser only. And it starts the same way: we make an initial request in the browser. The server then responds to that by sending back the HTML page to the browser, but it also sends back our compiled React JavaScript files, which controls our React application. So from this point on, React and the React Router can take full control of the application.

So initially the HTML page that we get back is virtually empty, and then React injects the content dynamically using the components that we create. If we then decide to click on a link to a new page, the React router is going to step in and intercept that request to stop it from going to the server. And instead, it's going to look at the new page request and inject the required content on the screen. For example, clicking on a contact link, the React router will tell React to inject the contact component into the browser. If we were to click on an about link, it would tell React to inject the about component and so forth.

So this is generally the way the React router works. We assign a top-level component for each route or page, and that component is dynamically injected into the browser when we visit that route. Now this whole process means that we're making less requests to the server, and the whole website therefore feels faster and slicker. So now we know from a bird's eye perspective how this works, let's see how to set it up in our code.

Installing React Router

So the first thing we need to do is install the React Router package because it's not a part of the core React library. Now to do this, we need npm and we need a new terminal. So click on this, and then we're going to type npm install and then it's react-router-dom. And then I'm going to use a specific version, and that version is five. And to do that I'm going to say @5.

Now this version is currently stable. Version 6 is in beta, but that might change over the coming weeks and months. So I didn't want to use that version in this series in case it does change, but I will be doing a React Router 6 tutorial once a stable release is here or at least once we have a release candidate. But to follow along with this, use version 5 like me, and then you can always upgrade to version 6 in the future. So press enter to install this.

And then once that's installed, we can close this and just go to your package.json file and you should see now the react-router-dom package right here. So version 5.2. Alright then. So remember, when we install something it goes inside the node_modules folder, so if you're wondering where it's put that, it's inside here.

Importing & Configuring the Router Component

So now we've installed that package, how do we actually use it and set up routing for our application? Well, the first thing to do is to go to the root component, which is this App.js file, and we need to import a few things from the React Router package right here. So let's do that first. I'm going to import, and then we're going to destructure a few things. The first thing we need is the BrowserRouter, and we're going to say as Router. And that means we can use the BrowserRouter that we're importing using this name inside this file. So that's the first thing we want to import. And we also want to import something called the Route component, and also the Switch component. So we'll see what these do as we go forward, but for now let's say from 'react-router-dom'.

Okay, so now we need to surround our entire application with the Router component. And what that means is that we can use the router in the entire application. All components that are nested inside this App component have access to the router. So let us now do that. I'm going to surround this div with this Router component. So, Router like so, and then we get the closing tag here. Let's place that at the end and scoot this in. Alright, so that's the first step.

Defining the First Page Route

The next step is to decide where we want our page content to go when we go to different pages. Well, I want it to go inside this div right here with the class of content. So I'm going to delete that Home component right here, and I'm going to replace it with the Switch component like so. Now, this Switch component makes sure that only one route shows at any one time. Now we're going to talk a little bit more later about how that works, but just know for now, all of our routes go inside this Switch component.

Okay, so now we need to set up our individual routes. So what we do is we create a route for each page that we have using this Route component right here. Now we only have one page for now, so we're just going to place one route inside this Switch component, but later on we're going to have other pages and more routes inside here as well. So let's do our route for the homepage.

So the Route component like so, and then let's get the closing tag as well. And then we need to add on a property to the Route component, which is going to be the path. Now the path property—oops, that needs to be inside the Route component. Let's cut it and paste it right here. The path is basically the route. So for the homepage, it would just be forward slash (/). Right? If we were doing an about page it could be /about. If it was a contact page it could be /contact. Basically, this is the path after the root of our website. So if our website was called the netninja.com or .co.uk, it would be the path after that part of the URL.

Okay, so this is the path for the homepage. and what we need to do is nest the component inside this route that we want to show when a user visits this route. So I want to show the Home component. So Home like so. And now what we're seeing is, okay, I want you to show the Home component right here inside the content div when we visit just /.

Now, notice the Navbar is always going to show because it's not inside this Switch statement. This is here for every single route, it doesn't matter what it is. But this content inside the Switch is going to change dependent on the route as we build up more routes. So let me just save this for now and let's preview this. Now nothing really should change because we're still using just the same home page, but at least it does work. Just forward slash like so, and we get the home page. So next up, we're going to add another route and talk a little bit more about this Switch component that we've used right here.