React路由跳转异常：Stats页面仅短暂显示后返回App页面

问题现象 #

点击按钮跳转至Stats页面后，页面仅显示不到一秒就自动返回首页。

问题原因 #

当前App组件中，首页的UI元素（视频、按钮、Logo等）与<Routes>同级渲染，意味着无论路由路径是什么，首页内容都会始终显示。同时缺少默认路径（/）的路由配置，导致路由切换逻辑混乱，出现页面自动回退的现象。

解决方案 #

将首页内容封装为路由页面，在<Routes>中配置首页路由（path="/"）和Stats页面路由，确保不同路径下仅渲染对应页面的内容。

修改后的代码示例 #

1. App.js 修改

import React from "react";
import bgvideo from "./assets/testfootage.mp4";
import "./background-video.css";
import "./main-buttons.css";
import logo from "./assets/logo.png";
import "./logo.css";
import Stats from "./stats";
import { Routes, Route, useNavigate } from "react-router-dom";

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

  // 首页组件内容
  const Home = () => (
    <div className="background-video">
      <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>
    </div>
  );

  return (
    <Routes>
      {/* 首页路由 */}
      <Route path="/" element={<Home />} />
      {/* Stats页面路由 */}
      <Route path="/stats" element={<Stats />} />
    </Routes>
  );
}

export default App;

2. index.js 保持不变

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

3. stats.js 保持不变

import React from "react";

function Stats() {
  return (
    <div>
      <h1>Your Listening Stats</h1>
      <p>Some simple text to test the rendering of the Stats component.</p>
    </div>
  );
}

export default Stats;

关键说明 #

• 把首页内容封装为Home组件，仅在路径为/时渲染。
• <Routes>作为App组件的唯一返回内容，确保路由切换时只会渲染匹配的页面组件，避免首页内容始终显示导致的冲突。
• 移除了App中多余的BrowserRouter导入（index.js已全局包裹），避免重复嵌套路由上下文。

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