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
Similar Posts:
- Uncaught SyntaxError: The requested module ‘/node_modules/.vite/react-router……Switch
- TypeError: Cannot read property ‘location‘ of undefined [How to Solve]
- ERROR Failed to compile with 1 errors
- Vue adds route errors dynamically: Uncaught Error… [How to Solve]
- Warning: Input is changing an uncontrolled input of type text to be controlled…
- ReactJS React createElement error type is invalid — expected a string …
- Vue: How to use Vue-router in Axios
- Vue3 router view keep alive include does not work [How to Solve]
- Vue new page Jump [Three Method to Use]