How to create Private or Protected route in React Router V6

Photo: Unsplash ( Call Me Fed )

TL;DR
You can check ready code here. Try live demo here and/or watch a video walk through here.

React Router V6 is a game-changer, it has a lot of new changes in comparison to its earlier version. I wasn’t following up with the latest Router update for a while until I had to do a small project and all of sudden my previous boilerplate React project started complaining to me for setting up Routes in the wrong way. You might be thinking but how? Isn’t your previously working template be working fine? I know, I will admit, I accidentally updated the Router package to the latest version :)

Dashboard example for React Router v6 Protected Routes

At first, I had trouble figuring out dealing with nested routes, after scratching my head for a while, I finally figured it out. Pretty soon, I realized I have to deal with another change and that was to do with the Protected route. In the previous version, I had something like this.

I tried the same approach and got this error:

React Router V6 console error : All component children of <Routes> must be <Route>

So how to solve this? Isn’t React Router v6 supposed to be easier?

Well, technically it is. We just need to approach it differently. If you are completely new to React Router v6, I will recommend you to watch this video.

First, let’s create a PrivateRoute component, I have named it as a ProtectedRoutes but names should not matter.

Now, comparing it with the previous version’s component, do you agree that the…