React嵌套路由跳转时如何隐藏父组件ListRooms的数据？

我正在学习React，开发一个简单的房屋列表网站。点击顶部菜单“List Room”后，当用户点击下一页按钮时，已成功跳转到ListRooms2组件，但父组件ListRooms的数据仍显示，请问如何隐藏该数据？

当前路由代码：

<Routes>
<Route path = "/" element = { <MainMenu />}>
 <Route index element = { <Home />} />
 <Route path = "/listrooms" element = { <ListRooms />}>
    <Route path = "listrooms2" element = { <ListRooms2 />} />
 </Route>
 <Route path = "/login" element = { <Login />} />
 <Route path = "*" element = { <ErrorPage />} />
</Route>
</Routes> 

React Router里嵌套路由的父组件默认会和子组件内容一起渲染，因为父组件是子路由的容器。要隐藏ListRooms的内容，有两种实用方案：

• 方案一：把ListRooms2改成同级路由
  调整路由结构，将ListRooms2从ListRooms的子路由改为同级，跳转时就不会渲染父组件内容：

  <Routes>
  <Route path = "/" element = { <MainMenu />}>
   <Route index element = { <Home />} />
   <Route path = "/listrooms" element = { <ListRooms />} />
   <Route path = "/listrooms/listrooms2" element = { <ListRooms2 />} />
   <Route path = "/login" element = { <Login />} />
   <Route path = "*" element = { <ErrorPage />} />
  </Route>
  </Routes>
  

• 方案二：在父组件中通过Outlet控制渲染
  如果要保留嵌套结构，在ListRooms组件里，仅当没有子路由匹配时才渲染自身数据：

  1. 先导入所需钩子：

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

  2. 在组件内判断路由并控制渲染：

     function ListRooms() {
       const isRootRoute = useMatch('/listrooms');
       
       return (
         <div>
           {/* 只有当前路由是/listrooms时，才显示父组件数据 */}
           {isRootRoute && <div>ListRooms的房屋列表内容</div>}
           {/* 子组件内容会渲染在Outlet位置 */}
           <Outlet />
         </div>
       );
     }
     

  也可以用useLocation判断路径：

  import { useLocation, Outlet } from 'react-router-dom';
  
  function ListRooms() {
    const location = useLocation();
    
    return (
      <div>
        {location.pathname === '/listrooms' && <div>ListRooms的房屋列表内容</div>}
        <Outlet />
      </div>
    );
  }
  

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