reactjs - React 路由器显示白色空白页

Question

我不明白为什么即使将交换机更改为路由器后我仍会出现空白页面，有人可以帮忙解决吗？ 应用程序.js:

import './App.css';
import React from 'react'
import Form from './Components/Form';
import Person from './Components/Person'
import 'bootstrap/dist/css/bootstrap.min.css';
import Headers from './Components/Header';
import {
  BrowserRouter as Router,
  Routes,
  Route
} from "react-router-dom";

function App() {

  return (
    <Router>
    <div>
      <Headers></Headers>
        Welcome to home
  
        <Routes>
        <Route path="/form" element={<Form />}>
        </Route>
        <Route path="/person" element={<Person />}>
        </Route>
        <Route path="/" element={<App />}>
        </Route>
        </Routes>

    </div >

    </Router>
  )
}
export default App;

当我检查控制台日志时:

Uncaught Error: You cannot render a inside another . You should never have more than one in your app.

Answer 1

您在渲染时嵌套路由器 <Route path="/" element={<App />}> 。这就是您收到错误的原因。

我建议您创建另一个组件(例如 Home)来渲染根路径。看看documentation .