反应 div 个问题

Question

我正在做一个 React Web，我有一个错误来自 div of validateDOMNesting
我不知道如何解决这个 error 或 fix.

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;

Answer 1

Home 组件上方的某处已经是主体。在 index.html 或 App.js

中查找

Answer 2

好的，问题是 React 有一个主体，如果我手动添加另一个主体，它会出错，所以解决方案是删除 <body>。

反应 div 个问题

React div problems

html

reactjs

react-bootstrap