Saya membina tiga halaman menggunakan React, setiap halaman mempunyai fail css sendiri dan hanya ada satu fail css untuk setiap halaman

Question

Saya sedang mengusahakan tiga halaman ini: App.js mempunyai dua butang, apabila anda mengklik butang pertama, ia akan membawa anda ke halaman "/quotes" dan apabila anda mengklik butang kedua, ia akan membawa anda ke halaman "/recommendations". html untuk ketiga-tiga karya, tetapi apabila saya pergi ke "/quotes" atau "/recommendations" kandungan html App.js dan kandungan css terus muncul (dengan cara yang sangat pelik dan rosak, ia kelihatan seperti Sangat teruk). Berikut adalah contoh:

Ini kod saya: 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 (Saya buat ini hanya untuk ujian):

body{
    background-color: red;
}

Halaman Cadangan.js:

import './RecommendationPage.css';
function RecommendationPage() {
  return (
    <div className="test">
         <h1>this should be the recommendation page!</h1>
    </div>
    
  );
  
 
}

export default RecommendationPage;

Halaman yang disyorkan.css:

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

Maaf jika ada yang tertinggal di sini, saya amat menghargainya jika anda melihat sekilas untuk melihat sama ada ia ada di sini: https://github.com/vitoriaacarvalho/my-taylor-swift-api/tree/master /depan

Terima kasih banyak kepada semua orang yang cuba membantu saya! <3

Answer 1

Saya rasa anda terjerumus ke dalam perangkap yang biasa dihadapi oleh pemula: ia tidak berstruktur seperti HTML.

Walaupun ini tidak sepenuhnya benar, ia membantu untuk memulakan dengan memikirkan bahawa React hanya mempunyai satu skrin/halaman: app.js. Anda boleh menggunakan komponen untuk menarik kandungan tambahan ke halaman ini. Ini dipanggil status pentadbiran.

Oleh kerana anda mempunyai semua kod ini dalam app.js, ia akan terus muncul. Apa yang anda perlu lakukan ialah mencipta fail berasingan (cth. "home.js") dan letakkan kod itu di dalamnya.

Kemudian anda perlu menggunakan alat seperti react-router-dom untuk membuat laluan supaya anda boleh menukar perkara yang terdapat pada skrin.

Sebaik sahaja anda melengkapkan ini, anda akan mula memahami cara React berfungsi.

Jadi:

1. Alihkan semuanya ke dalam fail baharu yang dipanggil home.js
2. Gunakan npm untuk memasang React-router-dom
3. Buat fail baharu bernama navbar.js dan gunakannya untuk mencipta bar navigasi untuk tapak web anda
4. Setelah selesai, cuma panggil navbar.js sebagai komponen dalam app.js
5. Tambah halaman anda sebagai laluan

Anda perlu membaca react-router-dom tetapi ia sangat mudah