My Project:

It is a Movie-List Project. This Application serves as a movie-streaming service, the user has 4 genres to choose from. (Romance, Horror, Comedy, and Action). The genres are displayed by a clickable card component, and when clicked, are routed to their respective pages (which display the movies of their choice).

THE PROBLEM:

I am currently experiencing a routing problem. For example, if the user was to click the Romance Genre Button. The URL would showlocalhost:3000/romance. , indicating that the page has been routed.

What gets returned?

A fully functioning Navbar

All 4 of the Genre Card Components are once again returned, it seems to me they are nested on the top of the body on the home page.

The Romance.js file, (where the list of movies should be), is returned as well, however it shows up under the Genre Card-Button Components.

Is there any way I can nest the Genre Card-Button Components only on the Homescreen, and have them dissapear when I’am routed to any of the Genre pages?

I know this might sound confusing, since english is my second lanuage. If you need a better explanation, feel free to ask me in the comments.

CODE:

App.js

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import NavbarA from './components/NavbarA';
import Home from './components/Home';

function App() {
  return (
    
    <div className="App">
      
      <NavbarA/>
      <Home/>
      <div> 



            </div>
    </div>
  );
}

export default App;

Navbar.js

import React, { Component } from 'react';
import { Navbar,Nav, Container } from 'react-bootstrap';
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
  } from "react-router-dom";
  import Home from './Home';
  import About from './About';

export default class NavbarA extends Component{
    render(){
        return (
            <Router>
            <div>
                <Navbar bg="dark" variant={"dark"} expand="lg">
                
  <Container>
    <Navbar.Brand href ="/home">
    <img src={process.env.PUBLIC_URL + '/spotifly.png'} alt="logo" />
    </Navbar.Brand>
<Navbar.Brand/>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="me-auto">
          
        <Nav.Link as ={Link} to = {"/home"}>Home</Nav.Link>
        <Nav.Link  as ={Link} to = {"/about"}>About</Nav.Link>
          </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>
            </div>
            <div>
            <Routes>
          <Route path="/" element={<Home/>} />
          <Route path="/about" element={<About />} />    
        </Routes>
            </div>
         </Router>

        )
    }
}
  

Home.Js

import React, { Component } from 'react';
import '../components/Home.css';
import {
    BrowserRouter as Router,
    Routes,
    Route,
  } from "react-router-dom";
  import Romance from ‘./Romance’;
  import Action from ‘./Action’;
 import Horror from ‘./Horror’;
 import Comedy from ‘./Comedy’;
import Buttons from './Buttons';

export default class Home extends Component{
   
    render(){
        return(
            <Router>
            <Buttons/>
            <Routes>
      <Route path=“/romance” element={<Romance/>} />
      <Route path=“/action” element={<Action />} />    
      <Route path=“/horror” element={<Horror />} />   
      <Route path=“/comedy” element={<Comedy />} />   
    </Routes>
        <div>
        
        </div>
        </Router>
            
        )
    }
}

Buttons.js

import React, { Component } from 'react';
import RomanceButton from './RomanceButton';
import ComedyButton from './ComedyButton';
import ActionButton from './ActionButton ';
import HorrorButton from './HorrorButton';

export default class Buttons extends Component{
  
    render(){

        return(
<div>
<RomanceButton/>  
 <ComedyButton/>        
<ActionButton/>
<HorrorButton/>


</div>
        )
    }
}

Note: All Card Components Follow the Same Structure. The only difference is their names.

Card.css

.card{
    padding: 0px;
    background-color: #121212;
    margin-bottom: 10px;
    margin: 10px;
    align-items: center,  
}

Romance.Card.js

import '../components/Card.css';

const RomanceCard = () => {
    return (
        <div class="card">
         <div class="card-body">

        <img src={process.env.PUBLIC_URL + '/romance.png'} alt="logo" />

          
        </div>
      </div>
    )
}

export default RomanceCard;

RomanceButton.js

import { Link } from 'react-router-dom';
import RomanceCard from './RomanceCard';

const RomanceButton = () => {
    return (
        <Link className='btn' to=‘/romance’>
<div>
            <RomanceCard/>
            </div>
        </Link>
    )
}

export default RomanceButton;

Romance.js

import React, { Component } from 'react';

export default class Romance extends Component{
    render(){
        return(
            <div> 
                <h1> THIS IS THE ROMANCE PAGE. HERE ARE THE LIST OF SONGS: </h1>

    {*/List of songs/*) 
                  
            </div>
        )
    }
}

What Languages Am I Using?

React, Javascript, Css

OTHER INFORMATION:

Current npm’s Installed On Package:

npx install create-react-app . 
npm install react-bootstrap
npm Install react-router-dom

All Package.json Dependencies:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.5",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "navbar": "^2.1.0",
    "react": "^18.0.0",
    "react-bootstrap": "^2.2.3",
    "react-dom": "^18.0.0",
    "react-is": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },

What Do you Think?

Thank you for your time, much appreciated!

• Zpo