React Router：点击Link完成路由后如何卸载/移除组件或容器？

我来帮你解决这个React Router的问题——点击Link后卸载导航容器其实很简单，核心就是根据当前路由来控制导航组件的渲染与否，下面给你两种实用的实现方式：

方法一：让路由直接替换整个导航容器 #

这种方法最直接，你可以把包含Link的导航容器和初始提示内容放在根路由的组件里，而页面路由单独配置。当用户点击Link跳转到对应页面时，React Router会匹配到更具体的页面路由，直接替换掉根路由的内容（包括导航容器）。

示例代码：

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

// 包含导航的根组件
function NavbarAndHome() {
  return (
    <div>
      {/* 这就是你要卸载的导航容器 */}
      <div className="nav-container">
        <Link to="/link1">Link1</Link>
        <Link to="/link2">Link2</Link>
      </div>
      <p>请选择上方的链接进入对应页面</p>
    </div>
  );
}

// Link1页面组件
function Link1Page() {
  return (
    <div>
      <h2>Link1页面内容</h2>
      {/* 可选：加个返回按钮，回到根路径重新显示导航 */}
      <Link to="/">返回首页</Link>
    </div>
  );
}

// Link2页面组件
function Link2Page() {
  return (
    <div>
      <h2>Link2页面内容</h2>
      <Link to="/">返回首页</Link>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        {/* 根路径渲染导航和初始内容 */}
        <Route path="/" element={<NavbarAndHome />} />
        {/* 页面路径直接渲染对应页面，导航容器会被完全卸载 */}
        <Route path="/link1" element={<Link1Page />} />
        <Route path="/link2" element={<Link2Page />} />
      </Routes>
    </Router>
  );
}

export default App;

原理很简单：React Router的Routes会匹配最具体的路径，当用户跳转到/link1时，根路径/的组件会被卸载，页面内容直接替换上去，完全符合你要的效果。

方法二：用路由状态条件渲染导航 #

如果你需要更灵活的控制（比如某些页面显示导航，某些不显示），可以用useLocation钩子获取当前路由路径，通过条件判断来决定是否渲染导航容器。

示例代码：

import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';

// 导航组件
function Navbar() {
  return (
    <div className="nav-container">
      <Link to="/link1">Link1</Link>
      <Link to="/link2">Link2</Link>
    </div>
  );
}

function Link1Page() {
  return <h2>Link1页面内容</h2>;
}

function Link2Page() {
  return <h2>Link2页面内容</h2>;
}

function App() {
  const location = useLocation();
  // 定义需要隐藏导航的路径列表
  const hideNavbarPaths = ['/link1', '/link2'];
  // 判断当前路径是否需要隐藏导航
  const shouldHideNavbar = hideNavbarPaths.includes(location.pathname);

  return (
    <Router>
      {/* 只有不在指定路径时才渲染导航 */}
      {!shouldHideNavbar && <Navbar />}
      <Routes>
        <Route path="/" element={<p>请选择上方的链接</p>} />
        <Route path="/link1" element={<Link1Page />} />
        <Route path="/link2" element={<Link2Page />} />
      </Routes>
    </Router>
  );
}

export default App;

这种方式的好处是，导航的渲染逻辑完全由你掌控，你可以随时调整哪些路径需要隐藏导航。

注意事项 #

• 确保你用的是React Router v6版本（现在主流版本），上面的示例都是基于v6的Routes和Route组件，如果你还在使用旧版的Switch，语法会略有不同，但核心思路一致。
• 如果你之前的导航容器一直没被卸载，大概率是因为你把它放在了Routes组件外面，不管路由怎么切换都会一直渲染。把它移到路由内部或者加条件判断就能解决。

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