在新建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>)}
官方案例地址: /github/remix-run/react-router/tree/main/examples/basic?file=src%2FApp.tsx.
官方git仓库: /remix-run/react-router.
关于react-router-dom 6.0.1的基础写法 解决Error: A <Route> is only ever to be used as the child of <Routes>