此问题在此处已有答案：

React Route render blank page（1个答案）
4小时前关门了。
我正在做一个预约应用程序。问题是当我点击“预约”，它应该带我到一个页面，在那里的形式是预约。我还没有作出的形式，因为我注意到没有弹出当我点击链接。（我应该看到一个h1标签包含文字说“bookingPage”）。只有两个路线。
App.jsx

import {  Route, Routes } from "react-router-dom"
import BookingPage from "./pages/home/bookingPage/BookingPage"
import Home from "./pages/home/Home"
const App = () => {
  return (
      <Routes>
      { <Route index element={<Home />} /> }
        <Route path='/booking' component={BookingPage} />
      </Routes>
  )
}
export default App

第一条路径包含所有组件
Home.jsx

import ContactSection from "../../Sections/Contact/ContactSection"
import FAQsSection from "../../Sections/FAQs/FAQsSection"
import Footer from "../../Components/Footer"
import Header from "../../Components/Header"
import Navbar from "../../Components/Navbar"
import PolicySection from "../../Sections/Policy/PolicySection"
import HeaderImage from '../../images/zamia.jpeg'
import PricesSection from "../../Sections/Prices/PricesSection"
const Home = () => {
  return (
    <>
      <Navbar />
      <Header title="Welcome Bossy Dolls !" image={HeaderImage}>
        Please read the following terms and contions before booking appointment.
      </Header>
      <PricesSection />
      <PolicySection />
      <ContactSection />
      <FAQsSection />
      <Footer />
 
    </>
  )
}
export default Home

第二条路线包含一个简单的
BookingPage.jsx

import React from 'react'
import './BookingPage.css'
const BookingPage = () => {
  return (
    <h1 className='bookingHeader'>BookingPage</h1>
  )
}
export default BookingPage

型
我做了我通常做的事情，即 Package 周围的标签
index.js

import ReactDOM from "react-dom/client";
import App from './App'
import './index.css'
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(
    <BrowserRouter>
     <App />
    </BrowserRouter>  
)

但是由于某种原因，当我点击一个链接，引导我到预订页面没有组件弹出。我试图删除App.jsx中的路线标签，但只会崩溃网站。我还试图添加路径&组件属性到App.jsx中的第一条路线，但也会崩溃网站。我不知道还能做什么。有什么建议吗？提前感谢。