Blog

React react-router-dom 报错：export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

2024-06-06 09:39AM

在运行React项目的时候报错说：export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

原因：由于我使用的 react-router-dom 版本是6.17.0，在 react-router-dom v6中，“Switch”已经被路由“Routes”取代，所以需要修改一些的内容：

1.修改导入的内容：

把这下面行代码：

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

修改为：

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

2.修改路由的声明：

把下面这些内容中的“component”修改为“element”

const routes =[
{
path: '/about_me',
component: <AboutMe/>,
},
{
path: '/blog_list',
component: <BlogList/>,
},
{
path: '/hi',
component: <Hi/>
}
];

修改后的代码：

const routes =[
{
path: '/about_me',
element: <AboutMe/>,
},
{
path: '/blog_list',
element: <BlogList/>,
},
{
path: '/hi',
element: <Hi/>
}
];

注意：如果你的“function”也使用了路由的“component”，也需要把“component”修改为“element”

function App() {
return (
<Router>
<div>
<ul>
<li>
<Link to='/blog_list'>Blog List</Link>
</li>
<li>
<Link to='/about_me'>About Me</Link>
</li>
<li>
<Link to='/hi'>hi</Link>
</li>
</ul>
<Routes>
{
routes.map(function(route, i) {
return (
<Route path={route.path} element={route.component} /> //主要是修改这里的内容
)
})
}
</Routes>
</div>
</Router>
);
};

export default App;

修改后的内容：

function App() {
return (
<Router>
<div>
<ul>
<li>
<Link to='/blog_list'>Blog List</Link>
</li>
<li>
<Link to='/about_me'>About Me</Link>
</li>
<li>
<Link to='/hi'>hi</Link>
</li>
</ul>
<Routes>
{
routes.map(function(route, i) {
return (
<Route path={route.path} element={route.element} />
)
})
}
</Routes>
</div>
</Router>
);
};

export default App;

不然页面无法加载路由组件里面的内容。

返回>>

请登录后再发表评论。

评论列表:

目前还没有人发表评论