React router redirect not working

One common problem where developers face when using the React Router is unable to redirect to a route programmatically, or the Redirect component of the react router not working.

Redirect not used inside a Router

The Redirect component needs to be used inside a Router component. If we have not wrapped the application in a Router component, the Redirect will not work as expected.

Here’s an example of how to use Redirect inside a Router:

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

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/login" component={LoginPage} />
        <Redirect to="/" />
      </Switch>
    </Router>
  );
}

export default App;

In the above example, we have wrapped our application in a Router component and defined the routes using the Route component. We have also used the Redirect component to redirect to the home page when a user visits invalid route.

Incorrect to prop value

Another common reason of the Redirect component not working is due to the wrong to prop value. The to prop should be set to the path of the route that you want to redirect to. We should make sure that the path is a valid one.

Here’s an example:

import React from 'react';
import { Redirect } from 'react-router-dom';

function LoginPage() {
  const isAuthenticated = true;

  if (isAuthenticated) {
    return <Redirect to="/" />;
  }

  return (
    <div>
      <p>Login page</p>
    </div>
  );
}

export default LoginPage;

In the above example, we have defined a LoginPage component that redirects to the home page if the user is authenticated. The to prop value is set to "/", which is the path of the home page route.

Rendering multiple components on the same route

If we are rendering multiple components on the same route, the Redirect component may not work as expected. In such a case, we can try wrapping the components in a single parent component and rendering that component on the route.

Following is an example

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

function App() {
  return (
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route path="/login" render={() => (
        <div>
          <LoginPage />
          <Redirect to="/" />
        </div>
      )} />
    </Switch>
  );
}

export default App;

In the above example, we have defined a LoginPage component and wrapped it in a parent div component. We have also used the render method instead of the component method to render the LoginPage component and the Redirect component on the same route.