Reactjs 使用 reactrouterdom 时弹出空白页面

我在预约一个预约apply.问题是，当我点击"预订约会"时，它应该会把我带到一个页面，表格是在那里预订约会.我还没有做表单，因为我注意到当我点击链接时没有弹出任何东西.(我应该看到一个包含文本"bookingPage"的h1标记).只有两条路由.

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(S)

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

我做了我通常做的事情，那就是把标签围起来

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>  
) 

但由于某些原因，当我点击一个指向预订页面的链接时，没有弹出任何组件.我try 删除App.jsx中的routes标记，但这只会使站点崩溃.我还try 向App.jsx中的第一条路由添加一个Path&amp；组件属性，但这也会使站点崩溃.我不知道还能做什么.有什么建议吗？先谢谢你.