react-snap自动追加多余斜杠导致路由匹配失败返回404如何解决

问题根因 #

这个异常是react-snap默认配置和静态服务默认行为共同导致的：

• react-snap默认开启trailingSlash配置，会为每个路由生成带尾斜杠的目录结构（比如/en路由会生成/en/index.html文件）
• 绝大多数静态服务器（Nginx、Apache、各大平台托管服务）默认访问/en路径时，会自动301跳转到/en/路径读取目录下的index.html
• 你的路由配置开启了strict严格匹配模式，/en/和你配置的/en路径规则不匹配，就会走到ErrorScreen页面

解决步骤 #

步骤1：调整react-snap配置禁用自动追加尾斜杠 #

在项目package.json中新增react-snap配置项，设置trailingSlash为false：

{
  "reactSnap": {
    "trailingSlash": false
  }
}

这个配置会让react-snap直接生成/en.html、/en/about.html这类扁平化静态文件，而非带层级目录的结构，从根源避免静态服务自动加尾斜杠跳转。

步骤2：添加统一路由规则做兜底兼容 #

如果你的静态服务还是会出现带尾斜杠的访问请求，可以在路由最顶部加一个全局重定向规则，把所有带尾斜杠的请求自动跳转到无尾斜杠的路径，修改后的路由代码如下：

const App = () => {
  // 统一处理路径尾斜杠逻辑，兼容根路径场景
  const removeTrailingSlash = (pathname) => {
    return pathname === '/' ? pathname : pathname.replace(/\/+$/, '')
  }

  return (
    <Router>
      <Switch>
        {/* 全局拦截带尾斜杠的请求，重定向到无尾斜杠格式 */}
        <Route
          path="/:url*(/+)"
          exact
          render={({ location }) => (
            <Redirect to={removeTrailingSlash(location.pathname) + location.search} />
          )}
        />

        <Redirect exact from='/' to='/en' />
        
        <Route exact strict path='/en' component={HomeScreenEn} />
        <Route exact strict path='/en/about' component={AboutScreenEn} />
        <Route exact strict path='/de' component={HomeScreenDe} />
        <Route exact strict path='/de/uberuns' component={AboutScreenDe} />
        
        <Route component={ErrorScreen} />
      </Switch>
    </Router>
  )
}

步骤3：调整静态服务配置（根据部署环境选做） #

如果用Nginx部署，在nginx.conf的server块中添加如下配置，关闭自动追加尾斜杠的行为，同时支持无尾斜杠路径直接访问对应静态文件：

server {
  # 其他现有服务配置保持不变
  rewrite ^/(.*)/$ /$1 permanent; # 把所有带尾斜杠的请求301重定向到无尾斜杠格式
  try_files $uri $uri.html $uri/index.html =404; # 优先匹配对应路径的html文件，避免自动跳转
}

修改完成后重新执行react-snap构建，部署后即可正常访问无末尾斜杠的路径。

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