How to implement a basic Private Router in React Router Dom?
Hi everybody, it’s been a while since the last article. Today, we are going to learn to create a private area with React Router Dom library.
I am not going to tell you everything about the React Router Dom from the scratch, but you will understand how we can create a private area that only logged-in users can see.
Let’s begin.
Preparing our folder structure.
As you can guess, we need to install the React Router Dom first.
yarn add react-router-domor
npm i react-router-domSince we started to use React Router Dom we need to wrap our Parent Component with Browser Router. Go to your ‘index.js’ file and wrap the <App/> with <BrowserRouter>. You need to be sure about React Router Dom package has been imported.
Now we can be allowed to use all the features that React Router Dom provided inside our Parent Components and its upcoming children components.
One more thing to do for using the library. Let's modify the ‘App.js’ file.
If you made it this far, that’s great you are now using the React Router Dom but, we are not using its features yet. Let’s look at the features that can be used for our specific project.
We need to hide the Home page aka. ‘dashboard’ in this case, and redirect non-logged-in users back to the ‘Login’ page/form that we created.
Let’s start with creating our ‘pages’ first.
Create a folder called ‘pages’ under the ‘src’ and create the following files.
Next, we need to create a ‘router’ folder inside our src folder and create the following files inside it.
- AppRouter file will contain all the Routes that we can go as pages.
- PrivateRoute file contains the logic of making a page or route private.
- PublicRoute file contains the logic of all the other pages or routes that can be seen by everybody.
Inside the AppRouter folder, we will create ‘Routes’ for our project which means we are creating multi-page-like app behavior. Normally React Apps are SPAs but with the help of React Router Dom, we can create Multi-Page Applications or at least apps behaving like that.
Let’s write the following lines inside our AppRouter.
You can change those depending on your needs.
In the last version of React Router Dom, we were wrapping our Routes with the ‘Switch’ keyword. But it’s now using the ‘Routes’ keyword.
Wrap your Routes with the ‘Routes’ keyword and write your routes with the ‘Route’ keyword by giving them a path and an element that is going to be rendered as a page element/component.
One thing you may notice is that I imported the ‘Navigate’ feature for redirecting. If anybody logged in and tries to go to the root (‘/’) will be redirected to ‘/dashboard’. So the ‘/’ URL will be ‘/dashboard’ from now on for the Home page.
Since my Home Page is a private page that couldn’t be seen by the public, we will wrap it with another ‘Route’ with the element attribute contains <PrivateRoute /> and nest the page ‘Routes’ which we want to make private in that case its <Home/> page.
And finally, we are going to wrap our publicly seen pages with a ‘Route’ with the element attribute containing <PublicRoute /> and nest the page ‘Routes’ which we want to make public in that case it's <Login/> page.
Now, we are going to create PrivateRoute logic. Go to the file called PrivateRoute.jsx which we created before and write the following lines inside it.
Here we can see some basic logic. We are creating a function called useAuth to check if the user is logged in or not by looking into LocalStorage for any mock log-in data which has the ‘user’ key. (It’s acting like a fake authentication token) If there is, it returns true, otherwise returns false.
And below our authentication function, we are creating a component called PrivateRoute, which we are going to use to wrap our nested Routes.
In this component, we are invoking the useAuth function and looking for the returning boolean value, and if it’s true return <Outlet/>, if it’s false, do not allow access to the Home page and redirect the user to ‘/login’ page again. So, you are asking what is the <Outlet/> is here. It’s very simple. It’s the children of the PrivateRoute, a shorthand way for calling what’s nested under <PrivateRoute/> Route that we set in our <AppRouter/>. Let’s look into our <AppRouter/> one more time for a better understanding of the concept.
I think you have a solid understanding now of what the Outlet is about in react-router-dom. Simple, right?
Next, we are creating our <Home /> component. Under the pages folder. Inside the previously created ‘Home.jsx’ file write the following lines. You can create a Home page whatever you like, this is just an example page.
Let’s create our Login page and Login Form too.
Inside the Login.jsx file under the pages folder, add the following lines.
As you can see we also have a LoginForm component which we are importing into the Login page.
In our src folder, create a folder called components and inside it create another folder with the name of the component in our case it's LoginForm, then create a file called LoginForm.jsx inside it.
Add the following lines to LoginForm.jsx file.
We have a login function inside our LoginForm component that sends mock data to the LocalStorage every time the login form is submitted. In our case, the input values are not important, they can be anything. Our basic login function will send the key ‘user’ and the value ‘test’ to the LocalStorage and navigate to the root URL. Behind the scenes, it’s checking if there is mock data inside the LocalStorage or not which we wrote the logic before inside our PrivateRoute.jsx.
In our case, if you want to create a log-out function, it might be like this. You may use it on a link in a Navbar component or desired place.
There is one last thing left to come to the end of our Basic Private Router guide. We are going to create a Public Route that can be seen by every user.
We have created our PublicRoute under AppRouter and nested our publicly visible page as its children.
Under the ‘router’ folder and inside the PublicRoute.jsx file that we created, add the following lines. It looks very similar to PrivateRoute.jsx file, but only with a small difference.
This time in our PublicRoute component logic, the last line is different.
It’s now invoking the useAuth function and unless it's true, it’s always redirecting the user back to <Outlet/> in our case it’s our children's route <Login/> page component.
With this last part, our guide comes to an end. I hope you got the basic points of creating private routes inside react-router-dom.
See you in the other articles.
