关于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 is only ever to be used as the child of element, never rendered directly. Please wrap your in a .

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、先准备好要切换的组件

class About extends Component {
	render(){
		return <h1>我是about内容<h1>
	}
}

class Home extends Component {
	render(){
		return <h1>我是home内容<h1>
	}
}

二、在 V5 版本则是这样使用

v5版本：Router直接包裹着Route组件

function Example() {
	return (
	<Router>
	    <ul>
	        <li> <Link to="/">home</Link> </li>
	        <li> <Link to="/about">about</Link> </li>
	    </ul>
	    <Route path="/"  component={Home} />
	    <Route path="/about" component={About} />
	</Router>
	)
}

三、在V6版本则是这样使用

v6版本：Route需要先被Routes组件包裹，再被路由器包裹，

其次把原来的component改为element，

最后千万不要忘了在element中写成组件形式，如：{}

function Example() {
	return (
	<Router>
	    <ul>
	        <li> <Link to="/">home</Link> </li>
	        <li> <Link to="/about">about</Link> </li>
	    </ul>
	    <Routes>
	    	<Route path="/"  element={<Home/>} />
	    	<Route path="/about" element={<About/>} />
	    <Routes>
	</Router>
	)
}

总结

提示：这里对文章进行总结：
新版本react-router-dom中主要注意一下三点：

1. 在路由器包裹路由之前需要先在路由外侧添加Routes组件
2. 路由中的component需要改为element
3. element后面需要写成组件标签形式，如element={}