How to use React Router v6 in a React application

Build a “portfolio” website with React

5 min readDec 16, 2021

Background photo, a colourful keyboard with a laptop which has a “npm” sticker — Photo by Paul Esch-Laurent on Unsplash

React Router is a widely used, popular routing library in React applications. The version 6 (v6) of React Router was recently released which has gone through some fundamental changes compared to the previous versions making it even easier to use. For instance, the new version is about 60% lighter than the previous versions and some changes in component names which are talked about in upcoming lines.

In this project we are going to have an introduction to the fundamentals of React Router v6 by building a “portfolio” website.

The focus of this article is React Router v6 and introducing its most commonly used components , therefore, creating and styling the pages will not be covered in depth. However, the source code is publicly available in my Github. Click here to get access to the source code.

While building a “Portfolio” web app the following will be covered:

Configuring Routes and,
Navigating with Link

For creating this application we are going to use create-react-app with TypeScript template. The reason for using TypeScript as said in its documentation is that “it can highlight unexpected behavior in your code, lowering the chance of bugs” therefore makes debugging easier for us.

Creating the react app

Go to your working directory and create a react app with a TypeScript template:

Our app is called react-router-vsix-app, change directory to the app’s folder, open your code editor (I am using VSCode) and remove the files which are not being used in the application such as logo, favicon and test files. Go to your App.tsx and remove all the code inside the return section. Your App.tsx should look like this at this stage:

Create pages and components

Create three folders inside the src folder: components, pages and img. Create NavBar.tsx and Footer.tsx inside the components folder and Home.tsx, About.tsx, Portfolio.tsx and Contact.tsx inside the pages folder.

Install the react-router-dom

Install react-route-dom version 6:

In App.tsx wrap all the components inside the <BrowserRouter> component. <BrowserRouter> is a parent component and is used to store all the other components. It connects the app to the URL by using HTML5 History API so the User Interface (UI) stays in sync with the URL.

In version 6 of react router <Switch> is deprecated and is not exported from react-router-dom. So we do not need to wrap a specific route by <Switch>. However, we use <Routes> instead. Routes wrap <Route> which takes a prop called element where we pass our components to.
Moreover, we do not need to use theexact prop anymore. The new algorithm enables us to match a specific route without using the exact prop. All these changes make the version 6 of React-Router-dom very easy to use.

Import <BrowserRouter>, <Routes> and <Route> from react-router-dom on the top of your App.tsx file.

Define routes to each page:

Create the Navbar

In this project react-bootstrap is used to style and create components. Feel free to code the Navbar from scratch or use any other frameworks and libraries.

Install react-bootstrap if decided to use it in your application:

Import <Navbar>, <Container> and <Nav> from react-bootstrap and <Link> from react-router-dom on top of your NavBar.tsx. <Link> enables us to navigate between the pages by using the prop to.

To make the Navbar responsive we need to collapse it on small displays and toggle it back to the original state on larger ones. For this we will use <Navbar.Toggle> and <Navbar.Collapse> from react-bootstrap. Wrap the navigation links inside the <Nav> component.

The useNavigation Hook

There are two react router interfaces being used to navigate between pages:
1- <Link> and < NavLink > which render <a> elements.
2- useNavigate and <Navigate> which replace the current location or change the state.

useNavigate replaces useHistory from the previous version of React Router and is being used to handle events. For example when we want to navigate back and forward between pages.

A back link is added to each page so the user can navigate to the previous page through a click event. To do this first import useNavigate and save it into a variable which is going to be used later in handling the click event. The minus number shows that we want to go back to the previous page (-1):

Now we can call our navigation handler function which we defined above in our <Button> components:

Adding content and styling

As stated above the main focus of this tutorial was introducing the version 6 of react-router-dom and its usage with React and TypeScript. If interested in the content and styling the app the way I did, check out the source code in my GitHub . Feel free to use this template for your portfolios.

The final product will look like this: