React Router Redirect

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>
}