使用react-router-dom点击预约链接后页面空白问题求助

你的问题出在React Router v6的API使用错误，以及一处不必要的语法冗余，具体如下：

1. Route组件属性错误 #

React Router v6 彻底移除了Route组件的component、render等属性，统一使用element属性传递组件的JSX实例。你当前给/booking路由用了component={BookingPage}，这在v6中是无效的，导致组件无法渲染，页面空白。

2. 冗余的语法包裹 #

首页的index路由被多余的{}包裹，虽然不会直接导致崩溃，但属于不必要的语法冗余，建议移除。

修复后的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' element={<BookingPage />} />
    </Routes>
  )
}

export default App

额外注意点 #

请确保你首页中的“book appointment”链接使用的是React Router提供的<Link>组件，而不是普通的<a>标签，否则会触发页面刷新，破坏单页应用的路由逻辑：

// 正确写法
import { Link } from 'react-router-dom';

// 在Navbar或对应位置添加
<Link to="/booking">Book Appointment</Link>

内容的提问来源于stack exchange，提问作者user14367514