react-router-dom v6中Redirect未导出编译失败问题修复咨询

报错信息 #

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

相关代码 #

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"
  }
}

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>
    );
}

修复方案 #

react-router-dom 6.x版本移除了Switch和Redirect组件，同时调整了Route的使用规则，需按以下步骤修改：

1. 替换导入组件
   将原导入的Switch、Redirect替换为Routes、Navigate：

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

2. 替换路由容器
   把<Switch>标签替换为<Routes>标签。

3. 更新Route组件写法
   v6中Route不再支持component属性，改用element传入组件实例；同时移除exact属性（v6默认精确匹配路径）：

<Route
    key={path}
    path={path}
    element={<component />}
/>

4. 替换Redirect为Navigate
   将<Redirect to={'/home'}/>修改为<Navigate to="/home" />。

修改后的完整Content.js代码 #

import React from 'react';
import {Routes, Route, Navigate} 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}>
            <Routes>
                {routes.map(({path, component}) => (
                    <Route
                        key={path}
                        path={path}
                        element={<component />}
                    />
                ))}
                <Navigate to="/home" />
            </Routes>
            <Footer>
                Copyright © 2011-{new Date().getFullYear()} {appInfo.title} Inc.
                <br/>
                All trademarks or registered trademarks are property of their
                respective owners.
            </Footer>
        </SideNavBarLayout>
    );
}

内容的提问来源于stack exchange，提问作者Đỗ Như Vỹ