关于react-router-dom 6.0.1的基础写法 解决Error: A ＜Route＞ is onl...

admin

在新建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的写法更改了

要切换的组件
[mw_shl_code=applescript,true]function Index() {
    return <h2>首页</h2>;
}

function List() {
    return <h2>列表</h2>;
}
[/mw_shl_code]

以前版本
Route 需要在 Router 里，组件为 component
[mw_shl_code=applescript,true]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>
        )
}
[/mw_shl_code]
现在版本
Route 需要在 Routes 里，组件为 element,注意括号内为标签
[mw_shl_code=applescript,true]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>
        )
}
[/mw_shl_code]
官方案例地址: https://stackblitz.com/github/re ... file=src%2FApp.tsx.
官方git仓库: https://github.com/remix-run/react-router