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
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 :
Vous devez lirereact-router-dom mais c'est très simple