为什么Next.js中React Router配置的路由访问时出现404错误？

你遇到的404问题是BrowserRouter的特性导致的：它基于HTML5 History API实现，前端路由跳转逻辑不会触发后端请求，但是直接在地址栏输入子路径、刷新子路径页面时，浏览器会主动向后端请求该路径对应的静态资源。单页应用所有前端逻辑都挂载在根路径的index.html上，后端没有对应路径的返回规则时，就会返回404错误。

先确认项目类型 #

如果你的项目是Next.js框架：
Next.js自带基于pages目录的文件路由机制，不需要引入react-router-dom实现路由，你只需要在pages目录下新建a.js文件，写入TestSocket组件的逻辑，就能直接访问/a路径，现有index.js里引入react-router-dom的代码可以直接删除。

如果是普通React单页应用，按开发/生产环境分别配置：

开发环境配置 #

• 如果是create-react-app搭建的项目：在package.json中添加配置项"homepage": "."，重启开发服务即可生效。
• 如果是自行配置webpack的项目：在webpack配置的devServer字段下添加historyApiFallback: true，该配置会把所有404请求重定向到根路径的index.html，重启开发服务即可。

生产环境配置 #

根据你部署使用的服务器，添加对应的重定向规则即可：

• Nginx部署：修改nginx.conf对应server块的配置

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

• Apache部署：在项目根目录新增.htaccess文件，写入以下内容

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

• Vercel/Netlify等平台部署：在项目根目录新增_redirects文件，写入以下内容

/*    /index.html   200

你现有代码中导入的History模块没有被使用，可以删除该导入项，不影响功能运行。

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