React父子路由下导航至子路由时隐藏父组件的实现问题

下面给你两种可行的解决方法，按需选择：

方法一：在父组件中做条件渲染 #

父子路由的默认行为是同时渲染父组件和子组件，所以可以在父组件（Posts）里判断当前路由是否匹配子路由路径，匹配时只渲染子组件的出口（Outlet），不渲染父组件的列表内容。

代码示例：

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

function Posts() {
  // 检查当前路由是否匹配文章详情页的/:id路径
  const isViewingPost = useMatch('/:id');

  // 如果是详情页，只渲染子组件
  if (isViewingPost) {
    return <Outlet />;
  }

  // 否则渲染文章标题列表
  return (
    <div className="posts-list">
      {/* 这里放你的文章标题列表代码 */}
      <Outlet />
    </div>
  );
}

方法二：重构路由为同级结构（更推荐） #

从业务逻辑来说，文章列表页（/）和详情页（/:id）本来就是两个独立的页面，没必要设为父子路由。可以把它们设为同级，用一个公共布局组件来承载共享的页面元素（比如导航栏、页脚），这样进入详情页时自然不会渲染列表组件。

代码示例：

import { Routes, Route } from 'react-router-dom';
import Posts from './Posts';
import Post from './Post';
import PageLayout from './PageLayout'; // 你的公共布局组件

function App() {
  return (
    <Routes>
      {/* 公共布局作为父路由，承载所有页面的共享部分 */}
      <Route element={<PageLayout />}>
        <Route path="/" element={<Posts />} />
        <Route path="/:id" element={<Post />} />
      </Route>
    </Routes>
  );
}

这种方式更符合路由设计的语义，也避免了条件渲染带来的额外判断逻辑。

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