我正在使用 React 构建三个页面，每个页面都有自己的 css 文件，并且只有一个 css 文件适用于每个页面
我正在处理这三个页面： App.js 有两个按钮，当您单击第一个按钮时，它将带您进入“/quotes”页面，当您单击第二个按钮时，它将带您进入“/recommendations”页面。所有三个的 html 都可以工作，但是每当我转到“/quotes”或“/recommendations”时，App.js html 内容和 css 内容都会继续出现（以一种非常奇怪和破碎的方式，看起来非常糟糕）。 这是一个例子：
这是我的代码： 应用程序.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;
推荐页面.css：
*{
background: rgba(191, 240, 243, 0.94);
}
.test{
background-color: rgb(234, 83, 83);
height: 30px;
}
如果这里缺少任何内容，我很抱歉，如果您快速查看一下是否在这里，我将非常感激：https://github.com/vitoriaacarvalho/my-taylor-swift-api/tree/master /前面
非常感谢所有试图帮助我的人！ <3
