React Router v6：判断组件是通过Outlet渲染还是直接路由子元素

方法一：利用React Router v6的useMatches钩子 #

React Router的useMatches钩子会返回当前所有匹配的路由条目数组。当Detail作为嵌套路由（桌面端，渲染在Overview的<Outlet/>中）时，匹配的路由会有两条：根路由/（对应Overview）和:id路由（对应Detail）；当Detail作为独立路由（移动端）时，匹配的路由只有:id这一条。

在Detail组件中实现判断：

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

function Detail() {
  const matches = useMatches();
  
  // 判断是否存在父路由匹配（即是否在Outlet中渲染）
  const isInOutlet = matches.length > 1;

  // 也可以更精确地检查根路由是否匹配
  // const isInOutlet = matches.some(match => match.pathname === '/');

  return (
    <div>
      {isInOutlet ? '当前在Overview的Outlet中渲染' : '当前作为独立路由渲染'}
      {/* 其他Detail组件内容 */}
    </div>
  );
}

方法二：通过路由组件传递标识属性 #

直接在路由定义时给Detail组件传递明确的标识，区分两种渲染场景。修改你的路由代码：

const desktopDetailRoute = <Route path=':id' element={<Detail isInOutlet={true} />} />;
const mobileDetailRoute = <Route path=':id' element={<Detail isInOutlet={false} />} />;

return (
  <Routes basename="/site">
    <Route path='/' element={<Overview />}>
      {isDesktop ? desktopDetailRoute : null}
    </Route>
    {!isDesktop ? mobileDetailRoute : null}
  </Routes>
);

然后在Detail组件中直接读取该属性：

function Detail({ isInOutlet }) {
  return (
    <div>
      {isInOutlet ? '当前在Overview的Outlet中渲染' : '当前作为独立路由渲染'}
      {/* 其他Detail组件内容 */}
    </div>
  );
}

两种方法对比 #

• 方法一更灵活，无需修改路由定义，完全依赖React Router的路由匹配状态，适合路由结构可能变动的场景。
• 方法二更直观，代码可读性高，适合路由结构稳定的场景。

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