在新建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.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。