亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

我正在處理這三個(gè)頁面： App.js 有兩個(gè)按鈕，當(dāng)您單擊第一個(gè)按鈕時(shí)，它將帶您進(jìn)入“/quotes”頁面，當(dāng)您單擊第二個(gè)按鈕時(shí)，它將帶您進(jìn)入“/recommendations”頁面。所有三個(gè)的html 都可以工作，但是每當(dāng)我轉(zhuǎn)到“/quotes”或“/recommendations”時(shí)，App.js html 內(nèi)容和css 內(nèi)容都會(huì)繼續(xù)出現(xiàn)（以一種非常奇怪和破碎的方式，看起來非常糟糕）。 這是一個(gè)例子：

這是我的程式碼： 應(yīng)用程式.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（我這樣做只是為了測(cè)試）：

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;
}

如果這裡缺少任何內(nèi)容，我很抱歉，如果您快速查看是否在這裡，我將非常感激：https://github.com/vitoriaacarvalho/my-taylor-swift-api/tree/master /前面

非常感謝所有試圖幫助我的人！ <3