问题

在下面的代码中，我有一个基本的Router，它有几个以catch-all通配符结尾的路由。我所有的路由都在开发中工作，但是当我在远程服务器上托管我的网站时，我的路由将在我通过链接导航网站时工作，如果我刷新或键入子页面的URL，路由将中断。例如，单击一个链接将我带到/about可以正常工作，但是如果我通过浏览器导航栏进入www.mywebsite.com/about，我会遇到404错误。

问题为什么通过浏览器链接导航到子页面，或者刷新子页面会出现404错误？
版本

React Router v6.4.4

import { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom';
import './App.css';
import Navbar from './components/Navbar';
import About from './pages/about';
import Contact from './pages/contact';
import Home from './pages/home';
import LeafletMap from './pages/map';
import Property from './pages/property';

const App = () => {
  const HeaderLayout = () => (
    <>
      <header>
        <Navbar />
      </header>
      <Outlet />
    </>
  );

  return (
    <BrowserRouter>
      <Routes>
        <Route element={<HeaderLayout />}>
          <Route path='/' element={<Home />} />
          <Route path='about' element={<About />} />
          <Route path='contact' element={<Contact />} />
          <Route path='property/:propertyId' element={<Property />} />
          <Route path='map' element={<LeafletMap />} />
          <Route path='*' element={<Home />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;