前言

提示：在新建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中写成组件形式</>，如：{<Home/>}


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={<Home/>}