Best React Router V6 Tutorial

4 min readNov 2, 2022

semicolon › @ghost › none › react › react router v6 tutorial › Mon Oct 31

Republishing from this original Semicolon tutorial: React Router V6.

One of the best React Router tutorials (IMO)

React Router V6 is the most recent way to add routing to a React application. Even though it’s been out for a while, many are still learning how it works.

Oh and Let’s Ghost Together / Sign Up Now — It’s Free!

Hey guys IMO this is one of the best React Router tutorials on YouTube:

I Think This Is The Best React Router V6 Tutorial on YouTube (just my opinion of course)

How To Install React Router V6 In Your Project

First, you need to install react-router-dom package.

Run the following command from your Terminal, Bash or cmd.exe:

npm install react-router-dom@6 --save-dev

Or absolute latest version:

npm install react-router-dom@latest --save-dev

After running this command, the react router dependency package.json file will be updated, this is why we use the — save-dev directive.

Importing Minimum Required Components

To start using Router V6 in React you need to import a few components and hooks first.

Note that it’s best to import BrowserRouter as Router to make code more readable.

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

Now that all required components are imported, we’re ready to build the simple navigation page.

Below is complete source code of a basic navigation system built with V6 router.

Creating Pages in /src/Pages/ For Your Navigation System

You can use any folder, /Pages just makes more sense.

To add a new page to your React router, first create a new file (Let’s say About.js), and export the new custom component with the same name from it. This component will represent an individual page view, that you want to included as part of your navigation system.

A single page component can look something like this:

import React from "react";function About() {
  return <div>About</div>
}export default About;

Save this file under /src/Pages/About.js folder in your project file structure.

Repeat the process for all pages you want to add (Contact.js, Portfolio.js, etc.)

Create all remaining pages. Then, import them into the App component as follows.

And here is the updated App component:

function App() {
  return (
    <Router>
      <nav style = {{display:'flex', flexDirection:'column'}}>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<Error />} />
      </Routes>
      <footer>©2023-2077 React Router.</footer>
    </Router>)
}

Place your navbar (which can be nested inside <nav> HTML element) inside your Router component. And use Link to create a link to each page on your navigation bar.

Explanation of links and views follows:

Setting up NavBar <Link>

Use <Link> tag we improted earlier with to attribute to set up each navigation button.

<Link to="/about">About</Link>

You can place any additional HTML tags inside Link (just wrap them with it.) In this example I simply used plain text link:

<nav style = {{display:'flex', flexDirection:'column'}}>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/contact">Contact</Link>
</nav>

So now our simple navigation bar is complete!

How to add routes with <Route> component

For each view use Route component with path and element attributes.

Inside element specify the page you imported from your /Pages folder:

<Route path="/about" element = {<About>}

Here are nested Route components inside Routes:

<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
    <Route path="*" element={<Error />} />
</Routes>

But how do you add parameters to a URL that you can then pass to your page component?

How to add params to your router using : (colon) character

You can also add parameters to your routing URL by prepending colon to the param name directly in the Route’s path value as follows:

<Route path="/user/:userId" element={<User />} />

Here I added userId parameter to /user url to get user by id (for example).

In the User component, you can destructure it into a variable as shown in following example:

First, make sure to import useParams hook into your component:

import { useParams } from "react-router-dom"

Now use the useParams in your User component’s constructor:

function User() {
  const {userId} = useParams()
  return <div>
    User Id is = {userId}
  </div>
}

How to set up 404 route

When a wrong address is entered into the browser, your app might not have a route for it.

In this case you want to setup an “error” page component.

To setup 404 error page, create a separate page component (same was like any other page we created earlier) and name it src/Pages/Error.js. And in the Route component’s path for that page’s route, use * (star) character instead of URL location:

<Route path="*" element={<Error />} />

Final Thoughts

Note that we need to wrap everything inside App with Router component.

But the content for each route will change only within Routes component.

The footer DOM will not update (even though it’s inside Router, it’s not inside Routes component, the only part that will update with linked components.)

Oh and One Last Thing

Are you learning to code from scratch? 👇

Please Subscribe To My Coding Channel on YouTube.

(Publishing new tutorials almost daily.)