如何在React路由中进入Service组件时不渲染Article组件？

要在Service页面隐藏Article组件，用React Router的useLocation钩子就能轻松搞定，步骤如下：

1. 首先从react-router-dom导入useLocation：

import { Routes, Route, useLocation } from 'react-router-dom';

2. 在App组件内部获取当前路由的位置信息：

function App() {
  const location = useLocation();
  // ... 其他原有代码
}

3. 给Article组件添加条件渲染逻辑，只有当前路径不是/service时才渲染：

<div className='App'>
  <SideBar />
  <Routes>
    {/* 原路由代码保持不变 */}
    <Route path='/' element={<Body />}>
      <Route path='/' element={<Home />} />
      <Route path='setting' element={<Setting />} />
    </Route>

    <Route path='/service' element={<ServiceLayout />}>
      <Route path='/service' element={<Service />} />
    </Route>
  </Routes>

  {/* 条件渲染Article组件 */}
  {location.pathname !== '/service' && <Article />}
</div>

补充说明 #

如果后续还有其他页面需要隐藏Article，直接扩展判断条件即可，比如：

{!['/service', '/other-hidden-page'].includes(location.pathname) && <Article />}

另外还有一种思路：把Article组件放到根路由的Body组件内部，这样只有根路由下的页面（Home、Setting）会渲染它，Service页面因为使用独立的ServiceLayout，自然不会包含Article。这种方式适合需要调整组件层级的场景，你可以根据实际需求选择。

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