react-router-dom下Link跳转正常但Route组件不渲染的问题排查

问题根因 #

• 你的应用实际托管在域名下的 /test/test-1 二级路径下，但默认的 BrowserRouter 是从域名根路径开始做路径匹配的，完全感知不到二级部署路径：
  • 跳转后地址栏的完整路径为 /test/test-1/user
  • Router拿到这个完整路径后，和你定义的路由规则 path="/user" 做匹配时，会发现路径并不完全相等，因此永远不会触发对应User组件的渲染
• 你在package.json中配置的homepage: "."仅作用于构建产物的静态资源加载路径，完全不会影响react-router内部的路由匹配逻辑，这也是你查阅资料长期没定位到问题的核心原因。

具体修复方案 #

方案1：给BrowserRouter显式指定应用基础路径 #

BrowserRouter本身内置了basename参数，专门用来告知Router当前应用的部署根路径，配置后Router会自动将所有路径前面的基础路径截掉，再和你定义的路由规则做匹配。
你只需要修改App组件中Router的配置即可，参考代码：

import React from "react";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import User from "./User"

const App = () => {
  return (
    {/* 新增basename属性，值对应你的线上部署基础路径 */}
    <Router basename="/test/test-1">
      <Switch>
        <Route path = "/user" exact component ={User}/> 
      </Switch>
    </Router>
  )
}

export default App

配置完成后的匹配逻辑：

• 地址栏的/test/test-1/user会被Router自动截掉前缀基础路径，剩余的待匹配路径为/user
• 刚好和你定义的path="/user"规则匹配，User组件即可正常渲染

• 关于Link跳转的优化：你现在使用的<Link to="./user" />可以直接改为<Link to="/user" />，因为配置完basename后，Router会自动在跳转时拼上基础路径，使用绝对路径写to属性可以避免嵌套路由下相对路径跳转错位的问题。

方案2：动态计算基础路径（适配多环境部署场景） #

如果你的项目需要部署在多个不同的二级路径下，不想在代码里硬写基础路径字符串，可以在初始化Router时动态解析当前应用的基础路径，比如从入口页的URL中提取静态资源的部署路径作为basename，避免每次换部署路径都要修改代码。

• 注意避坑：不要为了适配路径直接把Route的path值改成/test/test-1/user，这种写法将路由规则和部署路径强绑定，后续迁移部署地址时需要修改所有路由配置，维护成本极高。

附带的代码修正提示 #

• 原代码中写的大写开头的Import是不符合JS语法规范的，ES模块导入需要使用小写的import，否则会直接触发语法报错
• 原代码的JSX结构没有闭合完整，需要补全Router标签、组件函数的闭合括号，避免渲染报错

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