How to achieve conditional routing in React using react router dom


Last updated on Nov 14, 2020 by Suraj Sharma

In this tutorial, you will learn about how you set up a conditional routing using react-router-dom.

Consider you have user flow where a user has logged in your react app, then the user hits the /login route.

As the user is already logged-in, the user should always gets redirect to the /home instead of the login page and vice versa when the user is not logged in.

To get started, let’s create a component and a component and a component which contains our logic to conditionally route between pages.


import React from 'react';

const Login = () => {
  const [formValue, setformValue] = React.useState({
    email: '',
    password: ''

  const handleSubmit = (event) => {
    const { email, password } = formValue;
    if (email && email.trim() && password && password.trim()) {
      localStorage.setItem('token', '123');

  const handleChange = (event) => {

  return (
    <form onSubmit={handleSubmit}>
      <p>Login to Get Started</p>
        placeholder="enter an email"
        placeholder="enter a password"

export default Login;


import React from 'react'

const HomePage = () => {
  return <p>Welcome, User</p>

export default HomePage;


import React from 'react';
import PrivateRoutes from './PrivateRoute';
import PublicRoutes from './PublicRoute';

const AuthorizationContext  = React.createContext();

const Routes = () => {
  const token = localStorage.getItem('token');

  return (
    <AuthorizationContext.Provider value={token}>
      {token ? <PrivateRoute /> : <PublicRoute />}

export default Routes;

We have used the browser's localStorage to store a dummy token when the user successfully logs into the app.

To make the token globally accessible we have used AuthorizationContext, a React context API.

We have imported a <PrivateRoutes />, which contains private routes and if the user tries to hit '/login' route, he/she will be redirected to the home page

Create a Private Route component


import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import LoginPage from './LoginPage';
import HomePage from './Home';

const PrivateRoute = () => {
  return (
      <Route path="/private" component={HomePage} />
      <Redirect to='/private' />

export default PrivateRoute;

Create a Public Route component


import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import LoginPage from './LoginPage';
import HomePage from './HomePage';

const PublicRoute = () => {
  return (
      <Route path="/login" component={LoginPage} />
      <Redirect to='/' />

export default PublicRoute;


In this tutorial, we have learnt how we can use <PrivateRoute /> and` components to define our private routes and public routes respectively.

Moreover, we have also defined a React context API to globally share the authentication state across our application.

We have used the localStorage to store the authentication token, read the token from the localStorage and redirect the user to ‘/private’ route.

Related Solutions

Suraj Sharma is a JavaScript Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.