Error: A <Route> is only ever to be used as the child of <Routes> element, never rendereddirectly.Please wrap your <Route> in a <Routes>.

created at 11-12-2021 views: 67

reason

React routing version problem, you can check your own package.json file, check the version of react-router-dom, there should be 6 versions.

In the React-Router v6 version, Route has changed its usage.

The use of the route needs to be under the route label package:

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 the V5 version

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>

solution

method 1: change the version of react-router-dom to 5.2.0

npm i react-router-dom@5.2.0

method 2 using the latest grammar rules

The detailed React-router V6 update can be seen as follows:

created at:11-12-2021
edited at: 11-13-2021: