This guide includes step by step guide to implement react private routes
React is one of the most popular frontend libraries for building web applications. When building complex web applications, we often need to restrict access to certain pages or components based on user authentication or authorization. In this scenario, private routing is essential. Private routing is a mechanism that enables us to restrict access to certain pages or components in a web application. In this blog, we will learn how to implement private routing in React.
Implementation:
To implement private routing in React, we need to follow these steps:
Step 1: Install the required packages
First, we need to install the required packages. We will use the React Router library to implement private routing in our application. To install React Router, open your terminal and run the following command:
npm install react-router-dom
Step 2: Create a private route component
Next, we need to create a private route component. The private route component will check whether the user is authenticated or not. If the user is authenticated, the private route component will render the protected component. Otherwise, it will redirect the user to the login page. Here is an example of how we can create a private route component:
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) =>
{
return ( <Route {...rest} render={(props) => ( isAuthenticated === true ? <Component {...props} /> : <Redirect to='/login' /> )} /> )
}
export default PrivateRoute;
In this example, we are using the Route and Redirect components from the react-router-dom library. We are also using the spread operator to pass the rest of the props to the Route component. The PrivateRoute component takes three props: component, isAuthenticated, and rest. The component prop is the component that we want to protect, and the isAuthenticated prop is a boolean value that indicates whether the user is authenticated or not.
Step 3: Protect your routes
Finally, we need to protect our routes using the PrivateRoute component. We can do this by replacing the Route component with the PrivateRoute component. Here is an example of how we can protect our routes:
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import HomePage from './HomePage';
import ProfilePage from './ProfilePage';
import LoginPage from './LoginPage';
const App = () => {
const isAuthenticated = true; // replace this with your authentication logic
return (
<Switch>
<Route exact path='/login' component={LoginPage} />
<PrivateRoute exact path='/' component={HomePage} isAuthenticated={isAuthenticated} />
<PrivateRoute exact path='/profile' component={ProfilePage} isAuthenticated={isAuthenticated} />
</Switch>
)
}
export default App;
In this example, we are protecting the HomePage and ProfilePage components using the PrivateRoute component. We are also passing the isAuthenticated prop to the PrivateRoute component, which is set to true in this example. You should replace this with your own authentication logic.
Conclusion:
In this blog, we have learned how to implement private routing in React using the React Router library. Private routing is essential for building web applications that require user authentication or authorization. By following the steps outlined in this blog, you should now be able to implement private routing in your own React application.
