• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

216
Views
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",
about 3 years ago · Santiago Trujillo
3 answers
Answer question

0

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

import { Navigate } from 'react-router-dom';
.
.
.
{ component: () => <Navigate to="/404" /> }
about 3 years ago · Santiago Trujillo Report

0

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>
  );
}
about 3 years ago · Santiago Trujillo Report

0

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.

about 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error