React: 'Redirect' is not exported from 'react-router-dom'

I am getting the following error when running npm run start in the terminal.

> Attempted import error: 'Redirect' is not exported from 'react-router-dom'.

I have reinstalled node_modules, react-router-dom, react-router. Also restarted the terminal and my computer, but the issue persists.

My code:

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

import { RouteWithLayout } from './components';
import { Minimal as MinimalLayout } from './layouts';

import {
  Login as LoginView,
  Dashboard as DashboardView,
  NotFound as NotFoundView
} from './views';

const Routes = () => {
  return (
    <Switch>
      <Redirect
        exact
        from="/"
        to="/dashboard"
      />
      <RouteWithLayout
        component={routeProps => <LoginView {...routeProps} data={data} />}
        exact
        layout={MinimalLayout}
        path="/login"
      />
      <Redirect to="/not-found" />
    </Switch>
  );
};

export default Routes;

Here is my package.json imports:

"react-router": "^6.0.0-beta.0",
"react-router-dom": "^6.0.0-beta.0",

For react-router-dom v6, simply replace Redirect with Navigate

import { Navigate } from 'react-router-dom';
.
.
.
{ component: () => <Navigate to="/404" /> }

Redirect has been removed from v6. You can replace Redirect with Navigate.

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from 'react-router-dom';
import Home from '../home/Home';

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/" element={<Navigate replace to="/home" />} />
      </Routes>
    </Router>
  );
}

Redirect component has been removed from the react-router version 6.

From react router docs:

> The <Redirect> element from v5 is no longer supported as part of your > route config (inside a ). This is due to upcoming changes in > React that make it unsafe to alter the state of the router during the > initial render. If you need to redirect immediately, you can either a) > do it on your server (probably the best solution) or b) render a > <Navigate> element in your route component. However, recognize that > the navigation will happen in a useEffect.

---

If you want to use Redirect component, you will have to use react router version 5.

Alternatively, you can use Navigate component from react router v6. A <Navigate> element changes the current location when it is rendered

import { Navigate } from "react-router-dom";

return (
  <Navigate to="/dashboard" replace={true} />
)

Note: Navigate is a component wrapper around useNavigate hook. You can use this hook to change routes programmatically.

Redirect have been removed from v6 but you can do it like that right now :

<Route path="*" element={<Navigate to ="/" />}/>

For versions 6.X you must use the hook useNavigate.

You can't use the Redirect component because it has been removed from react-router-dom version 6.

You can use react-router-dom version 4.2.2. Just use the code below to install it.

npm install --save react-router-dom@4.2.2

or

yarn add react-router-dom@4.2.2

Have a good day.

Redirect component has been removed from the react-router version 6, For react-router-dom v6, simply replace Redirect with Navigate

import { Navigate } from 'react-router-dom';

<Routes>
<Route path="/login" element={isLogin ? <Navigate to="/" /> : <Login />}/>
</Routes>

Hi I remembered there was a hook called useHistory, this hook still exist, this only have a few changes and was renamed to useNavigate. Using this and following one of the examples from the documentation, I did this rework for my protected routes:

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../../contexts/AuthContext";

function ProtectedRoutes({ component: Component }, props) {
  const [loading, setLoading] = useState(true);

  const { currentUser } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (currentUser) {
      setLoading(false);
      return;
    }
    navigate("/");
  }, []);

  return <>{loading ? "Loading..." : <Component {...props} />} </>;
}

export default ProtectedRoutes;

And in my Routes this is used like this:

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import AuthFirebaseHelper from "./helpers/AuthFirebaseHelper/AuthFirebaseHelper";
import ProtectedRoutes from "./helpers/ProtectedRoutes/ProtectedRoutes";
import Dashboard from "./components/Dashboard";
import Home from "./components/Home";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/authentication" element={<AuthFirebaseHelper />}></Route>
        <Route path="/" exact element={<Home />}></Route>
        <Route
          path="/restricted"
          element={<ProtectedRoutes component={Dashboard} />}
        ></Route>
      </Routes>
    </Router>
  );
}

export default App;

The documentation for useNavigation

import {
    Routes,
    Route ,
    Navigate
  } from "react-router-dom";

return (
            <Routes>
                <Route path='/products/:id' element={<Store/>} />

                 //replace Redirect with Navigate
                <Route path="*" element={<Navigate to ="/products" />}/>
            </Routes>

    );

switch Redirect into Navigate, it will work.

<Route path='/' exact>
   <Navigate to={`/documents/${uuidV4()}`} />
</Route>

As it is removed in v6, you can use this as an alternative.

<Route path="*" element={<NotFound />} />

Actually switch and redirect is the routers defined jn react-router version 5 and currently react-router version 6 so this will not word either You used version 5 with switch and redirect or routers and to with version 6