Как скрыть определенные компоненты в Route ReactJS

Question

Я пытаюсь скрыть некоторые части моего AppContainer.jsx

Что я делаю, когда я нажимаю кнопку Login, мне нужно отобразить InstructorLoginForm, которая содержит только форму входа

но когда я нажимаю на кнопку Login, она работает нормально (даже адрес меняется в браузере на http://localhost:3000/login), но проблема в том, что я все равно вижу carousel, cards, navigation bar и т.д ...

Вот так выглядит моя домашняя страница (http://localhost:3000):

Вот так выглядит моя страница входа (http://localhost:3000/login):

Вот так выглядит мой AppContainer.jsx:

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>
    );
  }
}

Как видите, под нижним колонтитулом моей веб-страницы отображается login form. Это всего лишь скриншот нижней части веб-страницы. Если я прокручиваю, то все равно вижу контент, который видел в Homepage (http://localhost:3000)

Мне нужно скрыть carousel, cards и description inside jumbotron. Мне нужна форма для входа между navigation баром и footer

Есть идеи, как это сделать?

Answer 1

Вы должны использовать Switch и Route.

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

Где CarouselCardsParagraphFooter отображает все компоненты, которые вы хотите скрыть.

например

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

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

            <br />

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

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

Также было бы неплохо добавить Switch к /login маршруту.