关于react-router-dom 6.0.1的基础写法 解决Error: A ＜Route＞ is onl...
在新建react项目中使用react-router-dom 6.0.1版本难免会遇到以下报错
Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
首先要了解 6.0.1的写法更改了
要切换的组件
function Index() {
return <h2>首页</h2>;
}
function List() {
return <h2>列表</h2>;
}
以前版本
Route 需要在 Router 里，组件为 component
function Example() {
return (
<Router>
<ul>
<li> <Link to="/">首页</Link> </li>
<li><Link to="/list/">列表</Link> </li>
</ul>
<Route path="/" exact component={Index} />
<Route path="/list/" component={List} />
</Router>
)
}
现在版本
Route 需要在 Routes 里，组件为 element,注意括号内为标签
function Example() {
return (
<div>
<ul>
<li><Link to="/">首页</Link></li>
<li><Link to="/list/">list</Link></li>
</ul>
<Routes>
<Route path="/" exact element={<Index/>}/>
<Route path="/list/" element={<List/>}/>
</Routes>
</div>
)
}
官方案例地址: https://stackblitz.com/github/remix-run/react-router/tree/main/examples/basic?file=src%2FApp.tsx.
官方git仓库: https://github.com/remix-run/react-router
页:
[1]