React Router v6路由异常：手动输入URL无法访问路由

开发环境修复方案 #

修改你的webpack.dev.js中的devServer配置，添加historyApiFallback: true。这个配置会让Webpack Dev Server在找不到对应路径的资源时，自动返回项目的index.html，交由React Router处理客户端路由逻辑：

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-source-map',
  devServer: {
    port: 4000,
    hot: true, //enable webpack hot module replacement
    open: true,
    historyApiFallback: true, // 新增该配置项
  },
  plugins: [
    new ReactRefreshWebpackPlugin(),
    new webpack.DefinePlugin({
      'process.env.name': JSON.stringify('DAT UI dev'), //defining a env var 'name' having value 'DAT UI dev'
    }),
  ],
};

生产环境部署注意事项 #

当你打包项目部署到生产环境时，同样需要配置服务器将所有请求重定向到index.html，以下是常见服务器的配置示例：

Nginx配置 #

在Nginx的server块中添加路由规则：

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

Express.js配置 #

先安装connect-history-api-fallback中间件：

npm install connect-history-api-fallback --save

然后在服务器代码中引入并使用：

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

// 优先处理路由重定向
app.use(history());
// 托管打包后的静态资源
app.use(express.static('build'));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

问题本质 #

• 使用Link组件跳转时，是React Router在客户端直接处理路由切换，不会向服务器发送新的HTTP请求，因此能正常跳转。
• 手动输入URL或刷新页面时，浏览器会直接向服务器请求对应路径的资源，而服务器默认没有为这些客户端路由配置响应，因此返回Cannot GET /hi错误。配置路由重定向后，所有请求都会返回index.html，React Router就能正确解析并渲染对应路由组件。

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