React Router v5刷新路由自动跳转首页问题求助

你的问题主要来自两个方面：路由配置的语法错误，以及单页应用缺少服务器端的路由 fallback 配置。

1. 修正前端路由配置 #

你提供的路由代码存在语法错误，且未使用<Switch>组件来确保路由匹配的唯一性，这会导致路由逻辑混乱。

正确的基础路由配置 #

import { Switch, Route } from 'react-router-dom';

// 替换你的路由代码
<Switch>
  {/* 匹配/home路径 */}
  <Route exact path="/home" component={Home} />
  {/* 匹配根路径和/shipments路径 */}
  <Route exact path={['/', '/shipments']} component={ShipmentList} />
  {/* 匹配所有未定义的路径，返回404页面 */}
  <Route component={PageNotFound} />
</Switch>

带条件渲染的路由配置（如果需要权限判断等逻辑） #

如果原本你有条件渲染的需求（比如判断用户是否登录），请用render属性实现，不要直接在Route标签内写错误的条件语法：

<Route 
  exact 
  path={['/', '/shipments']} 
  render={() => {
    // 替换成你的实际条件判断逻辑
    const isAuthenticated = true; 
    return isAuthenticated ? <ShipmentList /> : <PageNotFound />;
  }} 
/>

2. 配置服务器的Fallback路由 #

React Router是单页应用（SPA），前端路由仅在浏览器端生效。刷新页面时，浏览器会直接向服务器请求当前URL对应的资源，若服务器未配置 fallback，会返回首页（或404），导致路由被重置到根路径。

根据你的部署环境做对应配置：

• 使用create-react-app打包后部署：用serve启动时添加-s参数，确保所有路径都指向index.html：

  serve -s build
  

• Nginx部署：在Nginx配置文件的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]
  

完成以上两步配置后，刷新页面就不会再跳转到首页了。

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