Menu
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", Any help is appreciated, Thank you.
841
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. Copied!
With the release of React Router v6, the Redirect component was removed and replaced with the Navigate component, which operates just as the Redirect component does by taking in the to prop to enable you redirect to the page you specify.
To redirect to another page on button click in React: Use the useNavigate() hook, e.g. const navigate = useNavigate(); . Call the navigate() function, passing it the path - navigate('/about') . The navigate() function lets us navigate programmatically.
Rendering a <Redirect> will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.
To fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6, we should import Navigate instead of Redirect.
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.
We no longer support redirecting on the initial render, due to compatibility issues with future versions of React React won't let us change the state in an ancestor component on the initial render w/out warning, so we had to remove the component, as well as the ability to do a navigate () on the initial render.
The Navigate component changes the current location when it's rendered. Copied! In version 6 of react router, the Redirect component is replaced with Navigate. When the Navigate component is rendered, it changes the current location.
For react-router-dom v6, simply replace Redirect with Navigate
import { Navigate } from 'react-router-dom'; . . . { component: () => <Navigate to="/404" /> } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
