React Router页面重定向问题：点击链接后导航链接未消失

看起来你是没正确利用React Router的路由切换机制，导致页面内容只是追加而不是替换。别担心，我来帮你搞定这个问题！

第一步：确保安装了React Router #

首先得确保你的项目里装了react-router-dom，如果没装的话，先跑这个命令：

npm install react-router-dom

第二步：重构App.js的路由配置 #

问题核心在于你没有用路由容器来管理页面切换，导致链接和新页面内容同时渲染。下面是正确的写法（以React Router v6为例，现在主流版本是v6）：

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

// 单独抽离导航组件，用来控制是否显示
function Navbar() {
  const location = useLocation();
  // 当用户进入About Us页面（路径不是首页）时，隐藏导航链接
  if (location.pathname !== '/') {
    return null;
  }
  return (
    <nav>
      <Link to="/about">About Us</Link>
    </nav>
  );
}

function App() {
  return (
    <Router>
      {/* 导航会根据当前路由决定是否显示 */}
      <Navbar />
      {/* 路由容器：只有匹配当前路径的组件会被渲染 */}
      <Routes>
        {/* 首页路由 */}
        <Route path="/" element={<h1>首页内容</h1>} />
        {/* About Us页面路由 */}
        <Route path="/about" element={<AboutUs />} />
      </Routes>
    </Router>
  );
}

export default App;

第三步：AboutUs组件保持简单 #

你的AboutUs组件可以正常写，不需要额外修改，比如：

function AboutUs() {
  return (
    <div className="about-us">
      <h1>About Us</h1>
      <p>这是我们的关于页面内容！</p>
    </div>
  );
}

export default AboutUs;

为什么这样能解决问题？ #

1. Router包裹整个应用：让React Router能管理全局的路由状态。
2. Routes作为路由容器：它只会渲染当前路径匹配的第一个Route组件，实现页面内容的替换而不是追加。
3. 条件渲染导航：通过useLocation获取当前路由路径，当用户进入About Us页面时，自动隐藏导航链接，只显示目标页面内容。

如果你还在使用React Router v5（旧版本），只需要把Routes换成Switch，Route的写法调整一下就行：

// v5版本的App.js示例
import { BrowserRouter as Router, Switch, Route, Link, useLocation } from 'react-router-dom';
import AboutUs from './AboutUs';

function Navbar() {
  const location = useLocation();
  if (location.pathname !== '/') {
    return null;
  }
  return (
    <nav>
      <Link to="/about">About Us</Link>
    </nav>
  );
}

function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path="/" component={() => <h1>首页内容</h1>} />
        <Route path="/about" component={AboutUs} />
      </Switch>
    </Router>
  );
}

export default App;

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