Je construis trois pages en utilisant React, chaque page a son propre fichier CSS et il n'y a qu'un seul fichier CSS pour chaque page

Question

Je travaille sur ces trois pages : App.js a deux boutons, lorsque vous cliquez sur le premier bouton, il vous amènera à la page "/quotes" et lorsque vous cliquerez sur le deuxième bouton, il vous amènera à la page "/recommendations". Le code HTML pour les trois fonctionne, mais chaque fois que je vais dans "/quotes" ou "/recommendations", le contenu HTML et le contenu CSS d'App.js continuent d'apparaître (d'une manière très étrange et cassée, cela ressemble à très mauvais). Voici un exemple :

Voici mon 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 (je l'ai fait juste pour tester) :

body{
    background-color: red;
}

RecommandationPage.js :

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

export default RecommendationPage;

Page.css recommandée :

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

Je suis désolé s'il manque quelque chose ici, j'apprécierais vraiment que vous jetiez un coup d'œil rapide pour voir si c'est ici : https://github.com/vitoriaacarvalho/my-taylor-swift-api/tree/master /devant

Merci beaucoup à tous ceux qui ont essayé de m'aider ! <3

Answer 1

Je pense que vous tombez dans le piège que rencontrent habituellement les débutants : ce n'est pas structuré comme le HTML.

Bien que cela ne soit pas tout à fait vrai, il est utile de commencer par penser que React n'a qu'un seul écran/page : app.js. Vous pouvez utiliser des composants pour extraire du contenu supplémentaire dans cette page. C'est ce qu'on appelle le statut administratif.

Parce que vous avez tout ce code dans app.js, il continuera à apparaître. Ce que vous devez faire est de créer un fichier séparé (par exemple "home.js") et d'y mettre ce code.

Ensuite, vous devez utiliser un outil tel que React-Router-Dom pour effectuer l'itinéraire afin de pouvoir modifier ce qui est à l'écran.

Une fois que vous aurez terminé, vous commencerez à comprendre comment fonctionne React.

Donc :

1. Déplacez le tout dans un nouveau fichier appelé home.js
2. Utilisez npm pour installer React-router-dom
3. Créez un nouveau fichier appelé navbar.js et utilisez-le pour créer une barre de navigation pour votre site Web
4. Une fois terminé, appelez simplement navbar.js en tant que composant dans app.js
5. Ajoutez votre page comme itinéraire

Vous devez lirereact-router-dom mais c'est très simple