我正在使用 React 建立三個頁面,每個頁面都有自己的 css 文件,並且只有一個 css 文件適用於每個頁面
P粉238433862
P粉238433862 2024-04-04 10:07:16
0
1
492

我正在處理這三個頁面: 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

P粉238433862
P粉238433862

全部回覆(1)
P粉644981029

我認為您陷入了新人通常會遇到的陷阱:它的結構不像 HTML。

雖然這並不完全正確,但一開始就認為 React 只有一個螢幕/頁面:app.js,這是有幫助的。您可以使用元件將其他內容拉入此頁面。這稱為管理狀態。

因為您在 app.js 中擁有所有這些程式碼,所以它將繼續出現。您需要做的是建立一個單獨的檔案(例如“home.js”)並將該程式碼放入其中。

然後,您需要使用像react-router-dom這樣的工具進行路由,以便可以更改螢幕上的內容。

完成此操作後,您將開始了解 React 的工作原理。

所以:

  1. 將所有內容移至名為 home.js 的新檔案中
  2. 使用 npm 安裝 React-router-dom
  3. 建立一個名為 navbar.js 的新文件,並使用它為您的網站建立導覽列
  4. 完成後,僅將 navbar.js 作為 app.js 中的元件呼叫
  5. 將您的頁面加入為路由

您需要閱讀react-router-dom,但這非常簡單

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板