如何用React Router在首页隐藏GlobalNav仅在作品详情页显示？

下面提供几种基于React Router v6的可行实现方案（从代码里的<Routes>标签判断你使用的是v6版本）：

方案一：通过useLocation钩子条件渲染 #

利用React Router的useLocation获取当前路径，根据路径判断是否显示GlobalNav：

1. 先导入useLocation：

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

2. 修改App组件代码：

function App() {
  const location = useLocation();
  // 判断当前路径是否为作品详情页（匹配/workdetails/开头的路径）
  const shouldShowGlobalNav = location.pathname.startsWith('/workdetails/');

  return (
    <Router>
      <ApolloProvider client={client}>
        <div className="App">
          {/* 仅在详情页显示GlobalNav */}
          {shouldShowGlobalNav && <GlobalNav />}
          <Routes>
            <Route path="/" element={<Homepage />} />
            <Route path="/workdetails/:id" element={<WorkDetails />} />
          </Routes>
        </div>
      </ApolloProvider>
    </Router>
  );
}

如果需要更精确的路径匹配（避免类似/workdetails/xxx/other的路径误判），可以用正则表达式：

// 假设id是数字，若id是字符串则改成/^\/workdetails\/.+$/
const shouldShowGlobalNav = /^\/workdetails\/\d+$/.test(location.pathname);

方案二：将GlobalNav嵌入目标路由的元素中 #

直接把GlobalNav和WorkDetails放在同一个路由元素里，首页路由不包含该组件：

function App() {
  return (
    <Router>
      <ApolloProvider client={client}>
        <div className="App">
          <Routes>
            <Route path="/" element={<Homepage />} />
            <Route path="/workdetails/:id" element={
              <>
                <GlobalNav />
                <WorkDetails />
              </>
            } />
          </Routes>
        </div>
      </ApolloProvider>
    </Router>
  );
}

这种方式逻辑直观，不需要额外的路径判断，适合路由结构简单的场景。

方案三：使用嵌套路由（适合多页面需要相同导航的场景） #

如果后续有更多页面需要显示GlobalNav，可以创建一个布局组件：

1. 创建布局组件：

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

function NavLayout() {
  return (
    <>
      <GlobalNav />
      <Outlet /> {/* 渲染子路由的内容 */}
    </>
  );
}

2. 修改App组件的路由配置：

function App() {
  return (
    <Router>
      <ApolloProvider client={client}>
        <div className="App">
          <Routes>
            <Route path="/" element={<Homepage />} />
            {/* 所有需要GlobalNav的页面都作为NavLayout的子路由 */}
            <Route element={<NavLayout />}>
              <Route path="/workdetails/:id" element={<WorkDetails />} />
              {/* 后续新增的需要导航的页面可以加在这里 */}
            </Route>
          </Routes>
        </div>
      </ApolloProvider>
    </Router>
  );
}

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