我正在做一个React Web，我在validateDOMNesting的div中有一个错误
我不知道如何解决这个错误或修复
Warning: validateDOMNesting(...): <body> cannot appear as a child of div<br/>.
at body<br/>
at Home<br/>
at Routes<br/>
at div<br/>
at App<br/>
我有一个视图Home.js，它有一个导航和一个图像，但错误在主体中，也许是在整个主体中渲染？。
import React from 'react'
import "bootstrap/dist/css/bootstrap.min.css";
import "./listar.css"
function Home() {
return (
<body className='hola'>
<div className="container">
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<a className="navbar-brand" href="#">LOGO</a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul className="nav justify-content-end ">
<li className="nav-item ">
<a className="nav-link " href="#">Inicio</a>
</li>
<li className="nav-item">
<a className="nav-link " href="#">Peliculas</a>
</li>
<li className="nav-item">
<a className="nav-link " href="#">Series</a>
</li>
<li className="nav-item">
<a className="nav-link " href="#">Noticias y Actores</a>
</li>
<li className="nav-item">
<a className="nav-link " href="#">Sobre nosotros</a>
</li>
<li className="nav-item">
<a className="nav-link " href="#">Inicio de Sesion</a>
</li>
</ul>
<form className="d-flex ">
<input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
<button className="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div className="container row align-items-center imagen justify-content-center">
<img src="https://concepto.de/wp-content/uploads/2016/04/leer.jpg" alt="" className='w-auto' />
</div>
</div>
</body>
)
}
export default Home;
这是我的App.js，在这里我导入了react router dom，在那里我有我的Web路由。
import './App.css';
import Listar from "./components/Listar"
import Sidebar from "./components/Sidebar"
import { Route, BrowserRouter as Router, Routes } from "react-router-dom"
import Register from './components/Register';
import Home from './components/Home';
import Login from './components/Login';
/* import Sidebar from "./components/Sidebar"; */
function App() {
return (
<div>
<Router>
<Routes>
<Route path="/" element={<Home />} component={Home}>Sidebar</Route>
<Route path="/listar" element={<Listar />} component={Listar}>Listar</Route>
<Route path="/sidebar" element={<Sidebar />} component={Sidebar}>Sidebar</Route>
<Route path="/login" element={<Login />} component={Login}>Login</Route>
<Route path="/register" element={<Register />} component={Register}>Sidebar</Route>
</Routes>
</Router>
</div>
);
}
export default App;
Home组件上方的某个位置已经是一个主体。在index.html或App.js 中查找
好吧，问题是react有一个主体，如果我手动添加另一个主体会出现错误，所以解决方案是删除<body>。