Ich erstelle drei Seiten mit React, jede Seite hat ihre eigene CSS-Datei und es gibt nur eine CSS-Datei für jede Seite

Question

Ich arbeite an diesen drei Seiten: App.js verfügt über zwei Schaltflächen. Wenn Sie auf die erste Schaltfläche klicken, gelangen Sie zur Seite „/quotes“, und wenn Sie auf die zweite Schaltfläche klicken, gelangen Sie zur Seite „/recommendations“. Der HTML-Code für alle drei funktioniert, aber wann immer ich zu „/quotes“ oder „/recommendations“ gehe, werden weiterhin der HTML- und der CSS-Inhalt von App.js angezeigt (auf eine sehr seltsame und kaputte Weise, es sieht sehr schlecht aus). Hier ein Beispiel:

Das ist mein Code: application.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 (Ich habe das nur zum Testen gemacht):

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;

Empfohlene Seite.css:

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

Es tut mir leid, wenn hier etwas fehlt. Ich würde mich wirklich freuen, wenn Sie einen kurzen Blick darauf werfen würden, ob es hier ist: https://github.com/vitoriaacarvalho/my-taylor-swift-api/tree/master /vorne

Vielen Dank an alle, die versucht haben, mir zu helfen! <3

Answer 1

我认为您陷入了新人通常会遇到的陷阱：它的结构不像 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，但这非常简单