React Router部署后刷新非首页出现404问题求助

问题原因 #

你当前使用BrowserRouter实现前端路由，这种路由依赖HTML5 History API：页面内跳转由前端JS处理，但刷新非首页路由时，浏览器会直接向服务器请求对应路径的资源（比如/authapp/register），而你的服务器上不存在该路径的物理文件，因此返回404错误。

解决办法 #

方案1：配置服务器重写规则（推荐，URL更美观） #

根据你使用的服务器类型，添加路由重写规则，让所有非静态资源的请求都指向index.html：

• Apache服务器：在服务器的authapp目录下创建.htaccess文件，写入以下内容：

RewriteEngine On
RewriteBase /authapp/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /authapp/index.html [L]

• Nginx服务器：在对应站点的server配置块中添加：

location /authapp {
  try_files $uri $uri/ /authapp/index.html;
}

• GitHub Pages：在项目public目录下创建404.html，内容完全复制index.html即可，同时确保package.json中的homepage配置正确（你已完成此配置）。

方案2：改用HashRouter（无需服务器配置，URL带#） #

修改index.js中的路由组件，将BrowserRouter替换为HashRouter：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { HashRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./store/Store";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";

let persistor = persistStore(store);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <HashRouter basename="/authapp">
          <App />
        </HashRouter>
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

修改后URL会变为https://www.nayeemriddhi.info/authapp/#/register，刷新时浏览器只会请求根路径的index.html，前端路由会处理#后的部分，避免404。

内容的提问来源于stack exchange，提问作者Nayeem Hyder Riddhi