React-Router中如何从嵌套路由正确导航至其他组件

问题根因 #

你遇到的跳转异常核心是导航栏配置的跳转链接使用了相对路径：React Router 中相对路径的跳转规则是基于当前页面路径做拼接，而非从站点根路径开始计算。比如当前处于 /routing/something 路径下时，点击 to="movies" 的链接会自动拼接为 /routing/movies，自然无法匹配到你在 App 组件定义的根级别路由规则。

解决方案 #

1. 修正导航链接为绝对路径 #

所有全局导航的跳转路径统一以 / 开头，改为根路径级别的绝对路径即可解决拼接问题。比如你的 navigationLinks 配置需要做如下调整：

// 修正前（相对路径，会触发路径拼接）
const navigationLinks = [
  {title: '首页', url: ''},
  {title: '电影', url: 'movies'},
  {title: '路由示例', url: 'routing'}
]

// 修正后（绝对路径，直接从根路径匹配）
const navigationLinks = [
  {title: '首页', url: '/'},
  {title: '电影', url: '/movies'},
  {title: '路由示例', url: '/routing'}
]

2. 可选：优化嵌套路由结构 #

你当前把 /routing/:arrow 子路由直接写在 App 级的 Switch 中，不是标准的嵌套路由写法，可调整为更易维护的结构：

• 首先去掉 App 组件中 /routing 路由的 exact 属性：

// 修正前
<Route exact path="/routing" component={RoutingExample} />
// 修正后
<Route path="/routing" component={RoutingExample} />

• 然后将子路由迁移到 RoutingExample 组件内部：

const RoutingExample = () => {
  let { path, url } = useRouteMatch();

  return (
    <div className="container border border-primary">
      <ul>
        <li>
          {`useParams ->`}
          <Link to={`${url}/arrow`}>
            <button className="btn btn-outline-primary">Click</button>
          </Link>
        </li>
      </ul>
      {/* 内部嵌套子路由 */}
      <Switch>
        <Route exact path={`${path}/:arrow`} component={Child} />
      </Switch>
    </div>
  );
};

调整后路由层级更清晰，也能避免后续新增路由时出现匹配优先级问题。

3. 验证路由匹配顺序 #

确认 App 组件中 Switch 下的路由规则顺序合理：静态路由在前、动态参数路由在后，通配符 404 路由放在最后，你当前的路由顺序除了需要去掉 /routing 的 exact 属性外，其余部分符合要求。

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