Redirect routes in react router

Redirecting is used primarily to check whether the user is authorized to visit this page, if not redirect them to relevant page.

Its very easy to do it in react applications using react routers Redirect component.

Lets see a basic example of how redirect component works in react router. Lets build a simple page which redirects to different pages based on the condition.

We will extend our router example by adding,

• Simple page demonstrating /old-route to /new-route

Simple Redirect example

Adding the redirect route to our react router example,

In this example. We will create two URL

• /old-route is the old URL which will be redirected to new URL /new-route using react router's Redirect component.

// Import Redirect component from react-router
import { Route, Redirect } from 'react-router';

// Pass from URL and to URL for the Redirect component
<Redirect from="/old-route" to="/new-route" />
// Handle the to Route and load new page
<Route exact path="/new-route" component={RedirectPage} />

// Add link to the old route and see the page displays the new url onClick
<Link to="/new-route">Redirecting to New page</Link>

// Page component
const RedirectPage = () => {
  return (
    <h3>Redirect Page</h3>
  );
};

Now check the example for simple redirect route here

You can see the old URL in the link is redirected to new URL and the new URL get shown in the browser.

Complex redirect example based on props

For this, we will build a small page which,

• redirects to dashboard if the props isLoggedin is true or
• display a simple message as not logged in if the props isLoggedin is false

Lets build the page first,

const AuthPage = ({ isLoggedIn }) => {
  if (isLoggedIn) {
    return <Redirect to="/dashboard" />;
  } else {
    return <h3>User not loggedin</h3>;
  }
};

const DashboardPage = () => {
  return <h3>Dashboard Page</h3>;
};

Lets define the route for Auth page and Dashboard page,

// Route definition for Dashboard
<Route exact path="/dashboard" component={DashboardPage} />
// Route definition for not loggedin page by passing IsLoggedIn props as false
<Route exact path="/auth-not-loggedin" render={(props) => <AuthPage {...props} isLoggedIn={false} />} />
// Route definition for loggedin page by passing IsLoggedIn props as true. This route will automatically redirect to dashboard because of the condition
<Route exact path="/auth-loggedin" render={(props) => <AuthPage {...props} isLoggedIn={true} />} />


// Lets add the links to navigate to these pages
<Link to="/auth-not-loggedin">Not Loggedin</Link>
<Link to="/auth-loggedin">User Loggedin</Link>

Hola, you can check it now. The route redirects and change the browser URL to dashboard when we pass the isLoggedIn props as true. And displays a simple not loggedin message if the props is not set.

You can check out the functionality here,

Thats it folks, hope this helps you understand how redirect in react router works. See you soon with more on react series 🤗

You can checkout the codebase for this series here and the code for this section here