我正在處理這三個頁面: 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
我認為您陷入了新人通常會遇到的陷阱:它的結構不像 HTML。
雖然這並不完全正確,但一開始就認為 React 只有一個螢幕/頁面:app.js,這是有幫助的。您可以使用元件將其他內容拉入此頁面。這稱為管理狀態。
因為您在 app.js 中擁有所有這些程式碼,所以它將繼續出現。您需要做的是建立一個單獨的檔案(例如“home.js”)並將該程式碼放入其中。
然後,您需要使用像react-router-dom這樣的工具進行路由,以便可以更改螢幕上的內容。
完成此操作後,您將開始了解 React 的工作原理。
所以:
您需要閱讀react-router-dom,但這非常簡單