关于react-router-dom 6.0.1的基础写法 解决Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞

在新建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.