react-router-dom ^6.0.2使用过程中报错 Error: A <Route> is only ever to be used as the child of <Routes>
报错:
因为react-router-dom更新的之后路由使用时做了一写改变
废话不多说,上代码
旧版本:
import React from 'react'
import ReactDOM from 'react-dom'
/*
react-router-dom 的基本使用:
1 安装: npm i react-router-dom
*/
// 2 导入组件:
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
const First = () => <p>页面一的内容</p>
// 3 使用Router组件包裹整个应用
const App = () => (
<Router>
<div>
<h1>React路由基础</h1>
{/* 4 指定路由入口 */}
<Link to="/first">页面一</Link>
{/* 5 指定路由出口 */}
<Route path="/first" component={First} />
</div>
</Router>
)
ReactDOM.render(<App />, document.getElementById('root'))
新版本:
import React from 'react'
import ReactDOM from 'react-dom'
/*
react-router-dom 的基本使用:
1 安装: npm i react-router-dom
*/
// 2 导入组件:
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'
const First = () => <p>页面一的内容</p>
const Home = () => <p>我是首页</p>
// 3 使用Router组件包裹整个应用
const App = () => (
<Router>
<div>
<h1>React路由基础</h1>
{/* 4 指定路由的入口 */}
<Link to="/first">页面一</Link>
{/* 5 指定路由出口 */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/first" element={<First />} />
</Routes>
</div>
</Router>
)
ReactDOM.render(<App />, document.getElementById('root'))
总结: Route 需要在 Routes 里,组件为 element,注意括号内为标签
原文地址:https://blog.csdn.net/SUperstarkd/article/details/121483655