编译失败。/src/Content.js 尝试导入错误：“重定向”未从“react-router-dom”导出

Question

File package.json

{
  "name": "acc",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "0.27.2",
    "devextreme": "22.1.4",
    "devextreme-react": "^22.1.4",
    "exceljs": "4.3.0",
    "file-saver": "^2.0.5",
    "react": "18.2.0",
    "react-app-polyfill": "3.0.0",
    "react-axios": "^2.0.6",
    "react-dom": "18.2.0",
    "react-router-dom": "6.3.0",
    "react-scripts": "^2.1.3",
    "sass": "^1.34.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build-themes": "devextreme build",
    "postinstall": "npm run build-themes"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "devextreme-cli": "1.3.2",
    "devextreme-themebuilder": "^21.2.4"
  }
}

File Content.js

import React from 'react';
import {Switch, Route, Redirect} from 'react-router-dom';
import appInfo from './app-info';
import routes from './app-routes';
import {SideNavOuterToolbar as SideNavBarLayout} from './layouts';
import {Footer} from './components';

export default function Content() {
    return (
        <SideNavBarLayout title={appInfo.title}>
            <Switch>
                {routes.map(({path, component}) => (
                    <Route
                        exact
                        key={path}
                        path={path}
                        component={component}
                    />
                ))}
                <Redirect to={'/home'}/>
            </Switch>
            <Footer>
                Copyright © 2011-{new Date().getFullYear()} {appInfo.title} Inc.
                <br/>
                All trademarks or registered trademarks are property of their
                respective owners.
            </Footer>
        </SideNavBarLayout>
    );
}

Error

Failed to compile
./src/Content.js
Attempted import error: 'Redirect' is not exported from 'react-router-dom'.

How to fix this error?

Answer 1

Issues

react-router-dom@6 doesn't export any Redirect component, along with also not exporting any Switch component. I'm surprised there's no error for that ( perhaps there is and you're only asking about the last error ).

Additionally the Route component API/syntax changed significantly; it no longer takes component , or render or children function props and instead now takes a single element prop taking a ReactNode , aka JSX, as a prop value.

Solution

Replace the Switch component with the Routes component and replace the Redirect component with a route rendering the Navigate component.

Map the routes array to the RRDv6 Route component where component is passed to the element prop.

Here's an example conversion:

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

export default function Content() {
  return (
    <SideNavBarLayout title={appInfo.title}>
      <Routes> // <-- Routes replaces Switch
          {routes.map(({ path, component: Component }) => (
            <Route
              key={path}
              path={path}
              element={<Component />} // <-- component passed as JSX
            />
          ))}
          <Route // <-- RRDv6 Redirect equivalent
            path="*"
            element={<Navigate to="/home" replace />}
          />
        </Route>
      </Routes>
      <Footer>
        Copyright © 2011-{new Date().getFullYear()} {appInfo.title} Inc.
        <br/>
        All trademarks or registered trademarks are property of their respective owners.
      </Footer>
    </SideNavBarLayout>
  );
}

FYI, if you are rendering a SideNavBarLayout "layout" then you might want to invest time in learning about Layout Routes and convert SideNavBarLayout into a layout route by rendering an Outlet instead of the children prop.

Answer 2

Version 6 of React Router doesn't export Redirect so you simply have to use either navigate() or declaratively as <Navigate... />

Source: https://reactrouter.com/docs/en/v6/upgrading/v5#remove-redirects-inside-switch

Please also see: How to redirect in React Router v6?

Answer 3

You have added router version 6 and your syntax seems like of react router version 5