如何让MainLayout识别当前匹配的路由是否属于:token路由分支？

针对你的路由场景，推荐使用useMatches() API来精准判断当前路由是否属于:token的路由树，以下是具体实现：

方法一：给目标路由添加唯一标识 #

1. 修改路由配置 #

给:token的路由添加一个自定义id属性（确保唯一）：

<Routes>
  <Route element={<MainLayout />}>
    <Route path="foo/:token" element={<Foo />} />
    <Route path=":token" element={<Bar />} id="token-base-route">
      <Route path=":id" element={<Baz />} />
    </Route>
  </Route>
</Routes>

2. 在MainLayout中判断 #

使用useMatches()获取所有匹配的路由层级，检查是否包含标记的路由：

import { useMatches, Outlet } from 'react-router-dom';

function MainLayout() {
  const matches = useMatches();
  // 检查匹配的路由链中是否存在id为token-base-route的路由
  const isInTokenTree = matches.some(match => match.route.id === 'token-base-route');

  // 根据isInTokenTree执行对应逻辑，比如渲染不同的导航栏、样式等
  return (
    <div className="main-layout">
      {isInTokenTree && <div className="token-tree-nav">专属导航</div>}
      <Outlet />
    </div>
  );
}

方法二：直接匹配路由的path模式 #

如果不想添加自定义id，也可以直接通过路由的path属性判断：

function MainLayout() {
  const matches = useMatches();
  const isInTokenTree = matches.some(match => match.route.path === ':token');
  
  // 后续逻辑同上
}

为什么之前的方法无效？ #

• useMatch('/:token/*')会误匹配foo/123，因为该模式会把foo解析为:token的参数值，无法区分路由层级；
• useParams()只能拿到token参数值，但无法判断该参数来自foo/:token还是:token路由；
• useResolvedPath主要用于解析相对路径，无法直接判断路由归属层级。

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