I'm building three pages using React, each page has its own css file and there is only one css file for each page

Question

I'm working on these three pages: App.js has two buttons, when you click the first button it will take you to the "/quotes" page and when you click the second button it will take you to the "/recommendations" page. The html for all three works, but whenever I go to "/quotes" or "/recommendations" the App.js html content and css content keep appearing (in a very weird and broken way, it looks like Very bad). Here is an example:

This is my 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 (I did this just for testing):

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;

Recommended page.css:

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

I'm sorry if anything is missing here, I'd really appreciate it if you took a quick look to see if it's here: https://github.com/vitoriaacarvalho/my-taylor-swift-api/tree/master/previous

Thank you so much to everyone who tried to help me! <3

Answer 1

I think you're falling into the trap that newbies usually encounter: it's not structured like HTML.

While this is not entirely correct, it helps to start by thinking that React only has one screen/page: app.js. You can use components to pull additional content into this page. This is called administrative status.

Because you have all this code in app.js, it will continue to appear. What you need to do is create a separate file (e.g. "home.js") and put this code in it.

Then you need to use a tool like react-router-dom to route so that you can change what's on the screen.

Once you complete this, you will start to understand how React works.

so:

1. Move everything into a new file called home.js
2. Use npm to install React-router-dom
3. Create a new file called navbar.js and use it to create a navigation bar for your website
4. Once completed, just call navbar.js as a component in app.js
5. Add your page as a route

You need to read react-router-dom, but it's very simple