reason:
For the problem of the react routing version, you can view your package.json
file and the version of react router DOM
, which should be version 6.
In the react route V6
version, route has changed its usage.
To use route, you need to package under the routes label:
import { BrowserRouter, Link, Route, Routes } from "react-router-dom"
import Home from './components/Home/Home'
import About from './components/About/About'
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
This is how it is used in V5
import { BrowserRouter, Link, Route, Switch } from "react-router-dom"
import Home from './components/Home/Home'
import About from './components/About/About'
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</Switch>
solve:
The first method: change the version of react router DOM
to 5.2.0
npm i [email protected]
The second method uses the latest syntax rules
The detailed react router V6
update can be seen as follows:
Interpretation of new features of react router V6 and migration guide
Guide for use of react router V6