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

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: