React中低版本 ^6 以下 react-router-dom 使用时报错问题处理

安装react-router-dom

npm add react-router-dom

1,在旧版本中我们写入react路由

import React from 'react'
import ReactDOM from 'react-dom'

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

const One = () => <p>one页面</p>

const App = () => (
  <Router>
    <div>
      <Link to="/one">页面一</Link>
      <Route path="/one" component={First} />
    </div>
  </Router>
)

ReactDOM.render(<App />, document.getElementById('root'))

2,但在react-router-dom 6以上改版了

import React from 'react'
import ReactDOM from 'react-dom'

import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'

const One = () => <div>123</div>

const App = () => (
  <Router>
    <div>
     <ul>
     	<li>
			<Link to="/one">点我</Link>
		</li>
     </ul>
      <Routes>
        <Route path="/one" exact element={<One />} />
      </Routes>
    </div>
  </Router>
)
//当组件为 element,注意括号内为标签
//exact是Route下的一个属性，react路由会匹配到所有能匹配到的路由组件，exact能够使得路由的匹配更严格一些。
ReactDOM.render(<App />, document.getElementById('root'))