![](/img/trans.png)
[英]./src/App.jsx Attempted import error: 'Routes' is not exported from 'react-router-dom'
[英]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>
);
}
Failed to compile
./src/Content.js
Attempted import error: 'Redirect' is not exported from 'react-router-dom'.
react-router-dom@6
不会导出任何Redirect
组件,也不会导出任何Switch
组件。 我很惊讶没有错误(也许有,你只是在问最后一个错误)。
此外, Route
组件 API/语法发生了显着变化; 它不再需要component
,或render
或children
function props,而是现在需要一个单element
prop,将ReactNode
(又名 JSX)作为 prop 值。
将Switch
组件替换为Routes
组件,并将Redirect
组件替换为呈现Navigate
组件的路由。
Map routes
数组到 RRDv6 Route
组件,其中component
被传递给element
prop。
这是一个示例转换:
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>
);
}
仅供参考,如果您正在渲染SideNavBarLayout
“布局”,那么您可能需要花时间学习布局路由,并通过渲染Outlet
而不是children
道具将SideNavBarLayout
转换为布局路由。
React Router 版本 6 不导出Redirect
,因此您只需使用navigate()
或以声明方式作为<Navigate... />
来源: https://reactrouter.com/docs/en/v6/upgrading/v5#remove-redirects-inside-switch
您已经添加了路由器版本 6,并且您的语法看起来像反应路由器版本 5
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.