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;
不然页面无法加载路由组件里面的内容。
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论