React Router部署后手动输入URL出现404问题求助

本地运行正常，部署后首页访问没问题，但手动输入其他页面的URL（比如/products、/products/electronics等）都会返回404错误。

我的路由代码（main.jsx） #

import { createBrowserRouter, RouterProvider } from 'react-router-dom'

const router = createBrowserRouter([
  {
    path: '/',
    element: <HomePage />
  },
  {
    path: '/products',
    element: <ProductsPage />
  },
  {
    path: '/products/:cat',
    element: <CategoryPage />
  },
  {
    path: '/products/detail/:id',
    element: <ProductDetailPage />
  }
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

已尝试但无效的解决方案 #

• 在public目录创建_redirects文件，内容：

  /*  /index.html  200
  

• 在public目录创建.htaccess文件，内容：

  <IfModule mod_rewrite.c> 
    RewriteEngine On  
    RewriteBase /  
    RewriteRule ^index\.html$ - [L]  
    RewriteCond %{REQUEST_FILENAME} !-f  
    RewriteCond %{REQUEST_FILENAME} !-d  
    RewriteCond %{REQUEST_FILENAME} !-l  
    RewriteRule . /index.html [L]
  </IfModule>
  

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