React路由直接访问不工作，但与navlink工作

Question

app.js的内容

function App() {
return (
<div className='App'>
<BrowserRouter>
<Routes>
<Route path='/*' element={<CustomerLayout />} />
<Route path='/admin/*' element={<AdminLayout />} />          
</Routes>
</BrowserRouter>
</div>
);
}

和CustomerLayout.js的内容

const CustomerLayout = () => {
return (
<div>
<MainHeader />
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/shop" element={<Shop />}></Route>
<Route path="/product-detail/:slug" element={<ProductDetail />}></Route>
<Route path="/cart" element={<Cart />}></Route> 
<Route path="/login" element={<Login />}></Route>       
</Routes>
<MainFooter />
</div>
)
}

现在当我尝试访问我的域名/商店从菜单，它工作得很好。菜单的代码是这样的<NavLink to='/shop'>Shop</NavLink>但如果尝试直接访问页面mydomain/shop我得到404未找到错误。我在这里错过了什么

更新:index.js已被Bret修改。

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { persistor,store } from './store/store';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.scss';
import { BrowserRouter } from "react-router-dom";
import { PersistGate } from 'redux-persist/integration/react';
const container = document.getElementById('root');
container.classList.add("i-wrap");
const root = createRoot(container);

root.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<BrowserRouter>
<App />
</BrowserRouter>
</PersistGate>
</Provider>
</React.StrictMode>
);   
reportWebVitals();

Answer 1

在公共目录中创建一个名为_redirects的文件

在这个文件中你所需要的就是

/* /index.html 200

保存然后再试一次，现在应该可以工作了

Answer 2

所有代码都很好，正如最初发布的那样。所有我需要的是放置一个.htaccess文件在公共文件夹之前构建的内容，如

FallbackResource ./index.html

and Everything got fixed.

注意:Bret很想帮忙，但没起作用。但我认为这不是他的错，因为我没有提到应用程序是部署在Apache服务器上的。