React Router中手动输入%引发URIError的优雅解决方法

核心原因 #

单独的%属于无效URI编码（规范要求%后必须跟两位十六进制字符），浏览器或服务器在解析请求时会直接抛出错误，请求根本无法到达React应用代码层面，因此必须在服务器/请求入口阶段处理。

具体解决方案 #

1. 开发环境（基于Create React App内置服务器）

Create React App的开发服务器依赖webpack-dev-server，可通过自定义中间件捕获URI解析错误：

• 在项目根目录新建dev-server.js文件：

const { createServer } = require('http');
const { parse } = require('url');
const startScript = require('react-scripts/scripts/start');

// 覆盖默认服务器逻辑，添加错误捕获
const originalCreateServer = startScript.createServer;
startScript.createServer = function(app) {
  const server = createServer((req, res) => {
    try {
      parse(req.url);
    } catch (err) {
      // 捕获URI解码错误，重定向到404页面
      res.writeHead(302, { Location: '/404' });
      res.end();
      return;
    }
    originalCreateServer(app)(req, res);
  });
  return server;
};

require('react-scripts/scripts/start');

• 修改package.json的start脚本：

"scripts": {
  "start": "node dev-server.js"
}

2. 生产环境 - Node.js Express服务器

在所有路由逻辑之前添加错误捕获中间件：

const express = require('express');
const path = require('path');
const app = express();

// 提前捕获URI解码错误
app.use((req, res, next) => {
  try {
    decodeURIComponent(req.path);
  } catch (err) {
    res.redirect('/404');
    return;
  }
  next();
});

// 托管React静态文件和路由fallback
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

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

3. 生产环境 - Nginx服务器

在Nginx配置文件中添加400错误页重定向规则：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/react/build;
  index index.html;

  # 将400错误请求转发到404页面
  error_page 400 /404.html;

  # React路由 fallback 配置
  location / {
    try_files $uri $uri/ /index.html;
  }

  # 404页面内部访问配置
  location = /404.html {
    internal;
  }
}

4. 静态部署平台（如S3、Netlify等）

• 在React项目的public目录下创建404.html，内容与应用内NotFound页面保持一致。
• 在平台配置中设置400错误指向404.html（例如Netlify可在_redirects文件添加/* /404.html 400!）。

注意事项 #

• 确保React应用中存在/404路由对应的NotFound页面，保证重定向后用户能看到友好提示。
• 该错误无法在React代码层面处理，因为请求到达React前就已被服务器拦截报错。

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