Export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'

Export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom' #

To solve the error "export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'", use the Navigate component instead of Redirect, e.g. <Navigate to="/dashboard" replace={true} />. The Navigate component changes the current location when it's rendered.

export redirect was not found in react router dom

App.js

Copied!
import React from 'react';
// 👇️ import Navigate instead of Redirect
import {Navigate} from 'react-router-dom';

export default function App() {
  const user = {id: 1, name: 'James Doe'};

  return (
    <div>
      {user && <Navigate to="/dashboard" />}
    </div>
  );
}

In version 6 of react router, the Redirect component is replaced with Navigate.

When the Navigate component is rendered, it changes the current location.

The component is a wrapper for the useNavigate hook which enables us to navigate programmatically.

App.js

Copied!
// 👇️ import useNavigate
import {useNavigate} from 'react-router-dom';

export default function App() {
  const navigate = useNavigate();

  const handleClick = () => {
    // 👇️ navigate programmatically
    navigate('/about');
  };

  return (
    <div>
      <button onClick={handleClick}>Navigate to About</button>
    </div>
  );
}

You can also pass the Navigate component as the element prop of a Route.

App.js

Copied!
import React from 'react';
import {
  Navigate,
  Route,
  Routes,
} from 'react-router-dom';

export default function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Navigate to="dashboard" />} />
      </Routes>
    </div>
  );
}

The Navigate component also takes a replace prop which allows us to replace the current entry in the history stack.

App.js

Copied!
import React from 'react';
// 👇️ import Routes instead of Switch 👇️
import {Navigate} from 'react-router-dom';

export default function App() {
  const user = {id: 1, name: 'James Doe'};

  return (
    <div>
      {user && <Navigate to="/dashboard" replace={true} />}
    </div>
  );
}

When the replace prop is set to true, the current entry in the history stack gets replaced with the new one.

In other words, navigating to the new route won't push a new entry into the history stack, so if the user clicks the back button, they won't be able to navigate to the previous page.

This is useful, for example, when a user logs in - you don't want them to be able to click the back button and get back to the login page.

Or if you have a route that redirects uses to a different page - you don't want users to click the back button and get redirected again.

Export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'

Export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom' #

Borislav Hadzhiev