How to hide certain components in Route ReactJS

Question

I am trying to hide some parts of my AppContainer.jsx

What I am doing is, when I click, Login button, I need to display InstructorLoginFormwhich contains only a login form

but when I click on the Login button, it works fine (even the address change in the browser to http://localhost:3000/login), but the problem is, still I can see the carousel, cards, navigation bar etc...

This is how my homepage (http://localhost:3000) looks like:

This is how my login page (http://localhost:3000/login) looks like:

This is how my AppContainer.jsx looks like:

import React, { Component } from "react";
import { BrowserRouter as Router, Link, Route, Switch } from "react-router-dom";

import "bootstrap/dist/css/bootstrap.css";
import "../node_modules/font-awesome/css/font-awesome.min.css";

import Carousel from "./components/index-carousel";
import Cards from "./components/index-cards";
import Paragraph from "./components/index-paragraph";
import Footer from "./components/index-footer";
import InstructorLoginForm from "./components/instructor-login";
import Navbar from "./components/index-navbar";

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loginClicked: false
    };
  }

  onClick(e) {
    e.preventDefault();
    this.setState({
      loginClicked: !this.state.loginClicked
    });
  }

  getOnlyNavbar() {
    return <Navbar />;
  }

  render() {
    return (
      <Router>

        <div>
        <nav className="navbar navbar-expand-md navbar-dark bg-dark">
          <div className="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
            <ul className="navbar-nav mr-auto">
              <li className="nav-item">
                <a href="/">
                  <img src="http://placehold.it/50x40?" alt="" />
                </a>
              </li>
              <li className="nav-item active" style={{ marginLeft: 10 }}>
                <Link to="/" className="nav-link">
                  Home
                </Link>
              </li>
              <li className="nav-item" style={{ marginLeft: 10 }}>
                <Link to="/about" className="nav-link">
                  About
                </Link>
              </li>
              <li className="nav-item">
                <Link  to="/contact" className="nav-link">
                  {" "}
                  Contact Us
                </Link>
              </li>
            </ul>
          </div>
          <div className="mx-auto order-0">
            {/* <a className="navbar-brand mx-auto" href="#">
            Navbar 2
          </a> */}
            <button
              className="navbar-toggler"
              type="button"
              data-toggle="collapse"
              data-target=".dual-collapse2"
            >
              <span className="navbar-toggler-icon" />
            </button>
          </div>
          <div className="navbar-collapse collapse w-100 order-3 dual-collapse2">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
              <Link to="/login"
              className="btn btn-info btn-sm">
                  {" "}
                  Login
                </Link>
              </li>
            </ul>
          </div>
        </nav>
        {/* show carousel */}
        <Carousel />

        {/* show cards  */}
        <Cards />

        <br />

        {/* show paragraph here  */}
        <Paragraph />

        {/* show footer here  */}
        <Footer />
      </div>


      {/* this (below Route) loads the login form here, but still I can see the carousel, cards, etc too */}
      <Route path="/login" component={InstructorLoginForm} />  

      </Router>
    );
  }
}

As you can see, login form displays below the footer of my webpage. This is only a screenshot of the bottom part of the webpage, if I scroll, I would still see the content I saw in Homepage (http://localhost:3000)

I need to hide carousel, cards, and the description inside jumbotron. I need Login form in between navigation bar and the footer

Any ideas on how to do that?

Answer 1

You shoudl use Switch and a Route.

<Switch>
    <Route exact path="/login" component={InstructorLoginForm} />
    <Route exact path="/" component={CarouselCardsParagraphFooter} />
</Switch>

Where CarouselCardsParagraphFooter render all the components you want to hide.

e.g.

function CarouselCardsParagraphFooter() {
    return (       
        <> 
            {/* show carousel */}
            <Carousel />

            {/* show cards  */}
            <Cards />

            <br />

            {/* show paragraph here  */}
            <Paragraph />

            {/* show footer here  */}
            <Footer />
        </>
    )
}

I would also be good to add Switch to /login route.