React Router v6 with a Project

6 min readNov 18, 2021

We have earlier seen a project with React router v5, but now recently version 6 came out. It have got many breaking changes in comparison with version 5 and we will learn it by creating a fresh project with create-react-app.

npx create-react-app router-v6

After that install the router version 6 in the project with below command.

npm install react-router-dom@6

As with all ReactJS project, we will get a lot of boiler plate code, so we will remove the below mentioned files.

Next, cleaned up the index.js and it looks like below.

In the App.js also, we are removing everything and having a h1 only.

Now, the http://localhost:3000/ will show this simple code.

Next, create a simple Home.js file in a components folder in src folder and put the below content in it.

Next, we will update the App.js file to contain the new format of Router. In version 6 the Switch is replaced by Routes and component prop in Route with element.

We will use bootstrap 5 in our simple project. So, open index.html and put the bootstrap link in the head part.

Now, we will create a file Courses.js and add a h1 and ul with lis in it. Notice, that we have used bootstrap classes in it.

Now, back in App.js we have created two Routes. One is the normal route to show the Courses component. Other is using a new feature of Navigate, in which we are giving a path /apps which will go to the courses route.

Now, when we go to /courses or /apps we will be shown the Courses component.

Next, we will create tow new components which will be shown inside the Courses component. So, create a file Allcourses.js inside the components folder and add the below content in it.

Next, create a Bundles.js file and add the below content in it.

Now, create the Routes for it in our App.js file. Here, we are creating it inside the /courses Route, by changing it from self-closing tag.

Now, in Courses.js file, we have removed some of the earlier data and added two Links, which will take us to /courses/allcourses and /courses/bundles routes.

We are also using a Outlet here, because we want to show the AllCourses and Bundles component here only.

Now, when we click on the Courses button, we will be shown the Allcourses route in the same component. And the same thing with the Bundles button.

Now, we will add the logic to click on any of the Course and showing a detail of the course. We need the name of the course, so we will be using the wildcard id inside allcourses Route, by creating a new Route in App.js file.

Now, in the AllCourses.js file we have created and array courseList containing our courses. After that we are mapping through inside our ul and the adding a NavLink to each <li>.

Here, we will be going to the route /courses/allcourses/${course} on clicking any of the <li>. We are also adding an Outlet here, so that the component can be displayed here itself.

Finally, we will create a SingleCourse.js file inside the components folder. Here, we are using a hook useParams to get access to the params of id. After that using bootstrap classes to show it in a nice card.

Now, we are able to click on any course and it’s data is shown below in localhost.

Now, we will add the logic to pass data from a component to another component. In React router v6, we can do it through the useNavigate hook or can also simply pass it to through a Link.

In the SingleCourse.js file, we are adding an anchor tag and clicking on it will navigate to a new dashboard route. We are passing a state variable as the second parameter and here passing the id.

We are also passing a state variable in the Link tag.

We also need to add this new Route in the App.js file.

Now, create a file Dashboard.js in the components folder. Here, the main thing is to use the useLocation hook, to get access to location.state variable.