React路由配置后直接访问/trackingdetails路径失效如何解决？

解决方案 #

1. 调整React路由配置 #

你当前的应用配置的部署根路径为/tracking，需要给BrowserRouter添加basename属性指定应用的基础路径，同步调整路由匹配规则：

<BrowserRouter basename="/tracking">
  <Switch>
    <Route exact path="/">
      <Search />
    </Route>
    <Route path="/trackingdetails">
      <Map />
    </Route>
  </Switch>
</BrowserRouter>

调整后路径对应关系如下，原有站内跳转逻辑无需修改：

• www.example.com/tracking 对应Search搜索页
• www.example.com/tracking/trackingdetails 对应Map详情页

如果你希望详情页直接通过根路径www.example.com/trackingdetails访问，需要先将package.json的homepage字段修改为"www.example.com"，去掉子路径后缀，同时删除BrowserRouter的basename配置即可。

2. 配置服务端SPA路由回退规则 #

BrowserRouter基于HTML5 History API实现客户端路由，直接在地址栏输入路径时，请求会先发送到服务端，服务端无对应静态资源就会返回404，需要配置服务端将所有未匹配到静态资源的请求重定向到应用入口index.html，交由客户端路由处理匹配：

• Nginx部署参考配置：

  # 部署在根目录时使用
  location / {
    try_files $uri $uri/ /index.html;
  }
  
  # 部署在/tracking子目录时使用
  location /tracking {
    try_files $uri $uri/ /tracking/index.html;
  }
  

• Apache部署参考配置，在应用根目录添加.htaccess文件：

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </IfModule>
  

• 云平台静态托管部署时，直接在托管配置中将404错误的响应码改为200，跳转目标设置为/index.html即可。

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