React Router路由问题：点击Link后仅渲染父组件指定路由，无法在TreatmentItem子组件中渲染Regions组件

首先咱们拆解下你遇到的核心问题：当URL切换到en/rendering时，你的TreatmentItem组件根本没被挂载，所以里面的<Route>自然不会生效。

为什么会出现这种情况？因为React Router的<Switch>组件会优先匹配第一个符合条件的路由：

• 当你点击<Link to="en/rendering">时，URL变为en/rendering，此时EnglishRoute里的<Route path="en/rendering">会被优先命中，直接渲染<Regions />，而不会再渲染<MainPage />——依赖MainPage才能渲染的Treatments和TreatmentItem自然不会出现在DOM中，里面的<Switch>和<Route>也就无从发挥作用了。

反过来，当你把en/rendering的路由放在EnglishRoute里时能正常工作，是因为这个路由处于顶层匹配逻辑中，能被直接触发。

正确解决思路：使用嵌套路由 #

如果你希望<Regions />能在MainPage的上下文里渲染（作为MainPage的子页面），需要利用React Router的嵌套路由机制，步骤如下：

1. 调整EnglishRoute的路由配置，移除en/rendering的顶层路由，同时给MainPage的路由去掉exact，让它能匹配en下的所有子路径：

// EnglishRoute.js
<p>english route</p>
<Switch>
  <Route path={`en`}> <!-- 移除exact属性 -->
    <MainPage />
  </Route>
  <Route path={`en/quote`}>
    <NewQuote />
  </Route>
</Switch>

2. 在MainPage组件中添加嵌套路由逻辑，处理en/rendering的路径匹配：

// MainPage.js
import { Switch, Route, useRouteMatch } from 'react-router-dom';

function MainPage() {
  const match = useRouteMatch(); // 获取当前路由的匹配信息

  return (
    <div>
      {/* 这里放置你原来MainPage的内容，包括<Treatments />和<TreatmentItem /> */}
      <Treatments />

      {/* 嵌套路由：处理en下的子路径 */}
      <Switch>
        <Route path={`${match.path}/rendering`}>
          <Regions />
        </Route>
        {/* 当URL为en时，渲染MainPage的默认内容 */}
        <Route exact path={match.path}>
          <p>Main Page 默认展示内容</p>
        </Route>
      </Switch>
    </div>
  );
}

3. 最后修改TreatmentItem里的<Link>，用match.path动态生成路径（避免硬编码，提升灵活性）：

// TreatmentItem.js
import { Link, useRouteMatch } from 'react-router-dom';

function TreatmentItem() {
  const match = useRouteMatch();

  return (
    <li>
      <Link to={`${match.path}/rendering`}>Rendering React</Link>
    </li>
  );
}

为什么这样能解决问题？ #

• 当访问en/rendering时，EnglishRoute会匹配path="en"并渲染MainPage；
• 接着MainPage里的嵌套路由会命中en/rendering，渲染<Regions />；
• 此时MainPage的其他内容（包括TreatmentItem）依然会被挂载，如果你需要隐藏默认内容，可以通过路由的exact属性控制显示逻辑。

这样既保证了路由的层级关系，也能让<Regions />在预期的位置正常渲染。

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