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
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
in react-router-dom v 6 is Navigate
. Example: -- <Redirect to='/' />
to <Navigate replace to="/" />
Reference Link: reactrouter.com/docs/en/v6/api#navigate
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 react-router-dom@4.2.2
or
yarn add react-router-dom@4.2.2
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='/' exact>
<Navigate to={`/documents/${uuidV4()}`} />
</Route>
Route
s wrapped in a Routes
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.
Success story sharing