Let us see a very simple example of how to use React Router Redirect functionality.
The Redirect component comes with react-router-dom library. So the first step should be to import this component in your JSX.
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect,
useHistory,
useLocation
} from "react-router-dom";
Here what I am going to do is to show the user a particular secret page only when the user is logged in. Otherwise, user will be redirected to a generic page.
This is our skeleton App component.
export default function App() {
}
Let’s add a hook to this App component to track if the user is logged in or not.
const [login, setLogin] = useState(false);
Here is our Router code for the demo of Redirect.
<Router>
<ul>
<li>
<Link to="/public">Public Page</Link>
</li>
<li>
<Link to="/protected">Protected Page</Link>
</li>
</ul>
<Switch>
<Route path="/public">
<PublicPage />
</Route>
<Route path="/protected">
{login ? <Redirect to="/dashboard" /> : <GenericPage />}
</Route>
<Route path="/dashboard">
<Dashboard/>
</Route>
</Switch>
</Router>
It has two links exposed /public and /protected. In the Switch code block you can see routes for /public, /protected and /dashboard. While /public path is routed to PublicPage component and /dashboard path is routed to Dashboard component, take a close look at /protected path. It checked the value of login hook and if it is true, only then it Redirects to /dashboard, otherwise it opens the GenericPage component.
Here is the complete code for reference.
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect,
useHistory,
useLocation
} from "react-router-dom";
const { useState } = React;
export default function App() {
const [login, setLogin] = useState(false);
function handleLogin() {
console.log('login clicked');
setLogin(true);
}
function handleLogout() {
console.log('logout clicked');
setLogin(false);
}
return <div>
<h1>This is a demo of redirect.</h1>
{!login && <button onClick={handleLogin}>Login</button>}
{login && <button onClick={handleLogout}>Logout</button>}
<Router>
<ul>
<li>
<Link to="/public">Public Page</Link>
</li>
<li>
<Link to="/protected">Protected Page</Link>
</li>
</ul>
<Switch>
<Route path="/public">
<PublicPage />
</Route>
<Route path="/protected">
{login ? <Redirect to="/dashboard" /> : <GenericPage />}
</Route>
<Route path="/dashboard">
<Dashboard/>
</Route>
</Switch>
</Router>
</div>;
}
function PublicPage() {
return <h3> You are visiting public page accesible by everyone in this world </h3>
}
function GenericPage() {
return <h3> You are not yet logged in. Please login the system</h3>
}
function Dashboard() {
return <h3>Your secret code is 783723892. I am telling you this only because you have logged in the system.</h3>
}