Single page applications (SPAs) with multiple views need to have a mechanism of routing to navigate between those different views without refreshing the whole web page. This can be handled by using a routing library such as React Router.
In this tutorial, let’s take a look at how to create routes using the React Router v6 library. Do note that, at the time of writing this post, React Router v6 is still in beta. This tutorial is going to give you a peek into some of the new features the library is coming out with.
If you have experience working with routing in React apps, you may already know that over the past few years Reach Router has gained some attention. However, it is getting merged back into the React Router library starting from version 6. This does mean that the v6 version has a smaller bundle size than its previous versions, one of the major reasons that Reach Router exists.
Prerequisites
To take full advantage of this tutorial, please make sure you have the following installed in your local development environment:
- Node.js version >=
12.x.xinstalled - Access to one package manager such as npm or yarn or npx
- Basic knowledge of JavaScript, Reactjs, and React Hooks
Getting started
Start by creating a new React app. Use the following command from a terminal window to generate the project directory, then navigate inside the project directory and install required dependencies to add React Router v6 library:
npx create-react-app react-router-v6-example
cd react-router-v6-example
yarn add history react-router-dom@next
Once the dependency is installed open the package.json file in your favorite code editor and you are going to see the dependency version of the react-router-dom library:
#react #react-router #javascript #developer
