Creating Private Route Component

[00:00 - 00:13] In almost every application, there are protected routes, which means routes which are reserved for some users with privileges. In our application, we don't want any anonymous user to visit the profile page.

[00:14 - 00:23] We can simply use redirect from reactout to DOM, or we can create a component which will make the private route reusable. Let's work on the latter part.

[00:24 - 00:38] So inside clients, and SRC inside components. Let's create a new file, and let's call it private route.tsx.

[00:39 - 00:50] Now let's create a function called private route. So const private route.

[00:51 - 01:01] And let's export it, export default private route. Now let's write props for this component.

[01:02 - 01:18] This time, the props will extend route props. So let's write interface props extends route props.

[01:19 - 01:42] And we are expecting component as props. So let's write component, which will have a type component type of type route component props, which will be of type any.

[01:43 - 02:03] And to give it some more freedom, we can use a pipe and write component type of type any. Now inside the function, let's restructure the component and of type component.

[02:04 - 02:14] And the rest of the parameters can be used using spread operator. And let's restructure it from the props.

[02:15 - 02:23] Rest here are the other props which can come along with this component. Now what we want to do is we want to check if the user exists.

[02:24 - 02:39] So here we can write const user. And like always, we will use app selector from the state and state dot user.

[02:40 - 02:48] Because we want to check if the user is logged in, only then we want to send them to the profile page. Otherwise, we want to redirect them to the login page.

[02:49 - 02:54] That's what the logic is all about. Now from this function, we will return a route.

[02:55 - 03:05] So here let's write route. And let's import it using react outer DOM.

[03:06 - 03:15] We can pass these rest props. So below, I can write dot dot dot rest.

[03:16 - 03:27] Now we want to render the actual component if the user exists. Otherwise, we want to use the redirect component coming from react outer DOM to redirect the user to the login page.

[03:28 - 03:40] To make this work, let's use render which is provided by route. So this will take props as an argument.

[03:41 - 03:46] And now comes the logic. We are simply checking if user exists.

[03:47 - 04:03] So if the user now we want to use the actual component with the props. So let's pass dot dot dot props.

[04:04 - 04:15] Let's also wrap it with parentheses. And if this is not the case, that means if the user is null, we want to redirect the user.

[04:16 - 04:28] So let's write redirect. And it takes two with a path name.

[04:29 - 04:35] And the path name in this case is the login page. And that's simply it.

[04:36 - 04:53] Now we can simply go to the app dot ps-x file and wrap this component with the dashboard from route to private route. And let's import private route from the components.

[04:54 - 05:09] If we go back to the browser and right now we are inside profile page. Now if we log out and we try to visit the profile page, we are redirected to the login page.

[05:10 - 05:17] So let's try that again. Let me write profile and we are redirected to the login page.

[05:18 - 05:33] And if we log in, so student at the rate test dot com and the password. we are going to the profile page without any problem. Perfect.