React Router v6.14.0：createBrowserRouter刷新/输URL遇404

核心原因 #

手动输入URL或刷新时，请求直接发送到服务器，服务器没有对应路径的物理文件，直接返回404，此时React尚未加载，无法接管路由渲染自定义<NotFound />组件。解决关键是让服务器将所有路由请求转发到index.html，由React Router处理路由匹配。

各部署环境配置方案 #

1. Nginx

修改站点配置文件（如nginx.conf或对应站点的.conf文件），在location /块中添加try_files指令：

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

重启Nginx生效。

2. Apache

在项目根目录创建.htaccess文件，写入以下规则：

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

确保Apache启用了mod_rewrite模块。

3. Vercel

在项目根目录创建vercel.json文件：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

4. Netlify

在项目根目录创建无后缀的_redirects文件：

/*    /index.html   200

5. GitHub Pages（修复之前方案无效问题）

• 在package.json中设置正确的homepage：

  "homepage": "https://你的用户名.github.io/你的仓库名"
  

• 安装gh-pages依赖：

  npm install gh-pages --save-dev
  

• 在package.json的scripts中添加部署命令：

  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
  

• 关键步骤：在public目录创建404.html，内容完全复制public/index.html。GitHub Pages会将所有未匹配到的请求转发到404.html，此时React加载后即可由Router匹配路由，包括渲染<NotFound />组件。

验证 #

配置完成后重新部署项目，刷新或手动输入路由URL时，服务器会转发到index.html，React Router接管后会正确匹配对应路由，未匹配的路径则会渲染自定义的<NotFound />组件。

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