React切换页面后首页内容仍渲染的问题解决方法

你的代码核心问题在于：首页的视频、Logo、按钮等元素都直接放在了Routes组件外部，这意味着无论当前路由切换到哪个路径，这些元素都会被持续渲染。React Router仅会替换Routes内部匹配的组件内容，外部元素不会被自动移除。

修复方案一：将首页内容移入根路由的element中 #

把原本在Routes外的首页内容，直接放到路径/对应的Route组件的element属性里，这样只有访问根路径时才会渲染这些内容：

function App() {
  const navigate = useNavigate();

  return (
    <div className="background-video">
      <Routes>
        {/* 根路由：仅在路径为/时渲染首页内容 */}
        <Route 
          path="/" 
          element={
            <>
              <video autoPlay muted loop>
                <source src={bgvideo} type="video/mp4" />
              </video>
              <div className="logo">
                <img src={logo} alt="Logo" />
              </div>
              <div className="button-container1">
                <button onClick={() => navigate("/stats")}>
                  See your Listening Stats
                </button>
              </div>
              <div className="button-container2">
                <button>Generate a Playlist</button>
              </div>
              <div className="button-container3">
                <button>Realtime Friends Playlist</button>
              </div>
            </>
          } 
        />
        <Route path="/stats" element={<Stats />} />
      </Routes>
    </div>
  );
}

export default App;

修复方案二：抽离独立的首页组件（更易维护） #

把首页内容封装成单独的组件，再在根路由中引入，让代码结构更清晰：

// 单独定义首页组件
function Home() {
  const navigate = useNavigate();
  
  return (
    <>
      <video autoPlay muted loop>
        <source src={bgvideo} type="video/mp4" />
      </video>
      <div className="logo">
        <img src={logo} alt="Logo" />
      </div>
      <div className="button-container1">
        <button onClick={() => navigate("/stats")}>
          See your Listening Stats
        </button>
      </div>
      <div className="button-container2">
        <button>Generate a Playlist</button>
      </div>
      <div className="button-container3">
        <button>Realtime Friends Playlist</button>
      </div>
    </>
  );
}

function App() {
  return (
    <div className="background-video">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/stats" element={<Stats />} />
      </Routes>
    </div>
  );
}

export default App;

两种方案的核心逻辑一致：让首页内容成为根路由的专属渲染内容，当路由切换到/stats时，React Router会自动卸载首页组件，只渲染<Stats />的内容。

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