Attempted import error: 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.

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>

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 [email protected]

or

yarn add [email protected]

Have a good day.

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

switch Redirect into Navigate, it will work.

<Route path="https://stackoverflow.com/" exact>
   <Navigate to={`/documents/${uuidV4()}`} />
</Route>

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>

    );

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

In react-router-dom version 5.x.x > 6 we can use <Redirect />

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

{ component: () => <Redirect to="/dashboard" /> }

In react-router-dom version 5.x.x < 6 we can use <Navigate />

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

{ component: () => <Navigate to="/dashboard" /> }

Use Navigate instead. I just did that and it works.

How do I fix redirect is not exported from react

Is redirect removed from react

How do I import redirect into react?

Is not exported from react?