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路线也很不错。

如何在Route ReactJS中隐藏某些组件

1 个答案: