React多页面路由异常：跳转子页面后首页内容与样式仍显示

我用React构建三个页面，每个页面配有独立CSS文件，但跳转至/quotes或/recommendations页面时，App.js的首页内容（标题、按钮）及样式会异常显示，导致页面布局混乱。目标页面的HTML能正常加载，但会和首页内容叠加。

相关代码 #

App.js #

import './App.css';
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import QuotePage from './QuotePage.js'
import RecommendationPage from './RecommendationPage.js'

function App() {
  return (
     <div className="all-page"> 
     <Router>
        <Routes>
            <Route path="/quotes" element={<QuotePage/>}/>
            <Route path="/recommendations" element={<RecommendationPage/>}/>
        </Routes>
      
    </Router>
             <main className="central-div">
                <h2>Taylor's Songs</h2>
                
                <a href="/quotes" className="quote-bttn">
                  FIND ME A QUOTE
                </a>
                <a href="/recommendations" className="recommend-bttn">
                    GET ME A RECOMMENDATION
                </a>
             </main>
        </div>
  );
}
export default App;

QuotePage.js #

import './QuotePage.css';

function QuotePage() {
  return (
     <h1>testing</h1>
  );
}

export default QuotePage;

QuotePage.css（测试用） #

body{
    background-color: red;
}

RecommendationPage.js #

import './RecommendationPage.css';
function RecommendationPage() {
  return (
    <div className="test">
         <h1>this should be the recommendation page!</h1>
    </div>
  );
}

export default RecommendationPage;

RecommendationPage.css #

*{
    background: rgba(191, 240, 243, 0.94);
}
.test{
    background-color: rgb(234, 83, 83);
    height: 30px;
}

核心问题 #

1. 首页内容（central-div里的标题、按钮）被放在Router的Routes外部，导致所有路由页面都会渲染这部分内容，和目标页面叠加造成布局混乱。
2. 使用原生<a>标签跳转会刷新整个页面，不符合React单页应用的路由逻辑。

修复步骤 #

1. 拆分首页为独立组件 #

新建HomePage.js，把原App.js中的首页内容迁移进去：

import './App.css';
import { Link } from 'react-router-dom';

function HomePage() {
  return (
    <main className="central-div">
      <h2>Taylor's Songs</h2>
      <Link to="/quotes" className="quote-bttn">
        FIND ME A QUOTE
      </Link>
      <Link to="/recommendations" className="recommend-bttn">
        GET ME A RECOMMENDATION
      </Link>
    </main>
  );
}

export default HomePage;

2. 修改App.js的路由结构 #

将首页组件加入Routes，并使用Link替代<a>实现无刷新跳转：

import './App.css';
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import QuotePage from './QuotePage.js';
import RecommendationPage from './RecommendationPage.js';
import HomePage from './HomePage.js';

function App() {
  return (
    <div className="all-page"> 
      <Router>
        <Routes>
          <Route path="/" element={<HomePage/>}/>
          <Route path="/quotes" element={<QuotePage/>}/>
          <Route path="/recommendations" element={<RecommendationPage/>}/>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

额外优化建议 #

• 避免在组件CSS中使用body、*这类全局选择器，容易造成样式污染，建议给每个页面根元素添加独特类名后再编写样式。
• 可添加404页面处理未知路径，提升用户体验。

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