React

React Router Redirect

redirect
5
(1)

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



How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Tagged ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments