React项目非首页路由刷新自动跳转首页问题排查

• react-router-dom v5的Switch组件仅会对直接子级的Route、Redirect组件做路由匹配逻辑，你将QueryClientProvider放在Switch和路由规则中间，导致Switch无法正确识别后续的路由匹配规则，所有非首页路径无法命中对应路由，最终触发重定向到首页。
• 若开发环境修复后生产部署仍出现该问题，属于静态资源服务器未配置单页应用路由 fallback 规则，刷新时服务器会把前端路由当做后端接口请求，找不到对应资源就返回首页或者404，触发重定向。

第一步：修正组件嵌套顺序 #

将QueryClientProvider移到Switch外层，保证Switch的直接子元素只有路由相关组件，修正后App.tsx代码如下：

<QueryClientProvider client={queryClient}>
  <Switch>
    <Redirect exact path="/" to="/main" />
    <Route path="/main" component={Main} />
    <Route path="/product/:id" component={Product} />
    <Route path="/search" component={Search} />
  </Switch>
</QueryClientProvider>

修改后开发环境的刷新跳转问题即可解决。

第二步：生产环境部署配置（仅开发环境正常生产环境异常时需要） #

根据你使用的部署工具添加单页应用路由 fallback 配置即可：

• Nginx部署：在站点配置的location块中添加规则 try_files $uri $uri/ /index.html;
• 使用serve工具部署静态包：启动命令改为 serve -s build
• 云平台部署：在对应平台的配置项中开启单页应用路由重写规则，将所有请求 fallback 到index.html。

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