ReactJS路由跳转后隐藏指定组件问题求助

我来帮你搞定这个问题！你现在遇到的核心问题是：首页的Carousel、Cards等组件没有和路由绑定，不管当前访问哪个路径，它们都会默认渲染，所以/login页面会同时显示首页内容和登录表单。咱们可以通过调整路由结构来解决这个问题。

解决方案步骤 #

1. 使用<Switch>组件包裹所有路由规则，确保React Router只渲染第一个匹配到的路由组件
2. 将首页专属内容（Carousel、Cards、Paragraph）放到匹配根路径/的Route中，并添加exact属性避免路由模糊匹配
3. 保持导航栏和Footer为全局组件，让它们在所有页面都显示，中间区域由路由动态切换内容

修改后的完整代码 #

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 {
  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">
              <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>

          {/* 路由内容区域：根据当前路径切换显示 */}
          <Switch>
            {/* 首页内容：仅在访问根路径/时显示 */}
            <Route path="/" exact render={() => (
              <div>
                <Carousel />
                <Cards />
                <br />
                <Paragraph />
              </div>
            )} />

            {/* 登录页面：仅在访问/login时显示 */}
            <Route path="/login" component={InstructorLoginForm} />

            {/* 你可以在这里继续添加其他路由，比如About、Contact */}
            {/* <Route path="/about" component={AboutComponent} /> */}
            {/* <Route path="/contact" component={ContactComponent} /> */}
          </Switch>

          {/* 全局Footer：所有页面都显示 */}
          <Footer />
        </div>
      </Router>
    );
  }
}

关键修改说明 #

• <Switch>组件：它会遍历所有子Route，只渲染第一个匹配当前URL的路由，避免多个路由同时渲染
• exact属性：给根路径/的Route添加这个属性，确保只有当URL完全等于/时才渲染首页内容，不会被/login、/about等路径匹配到
• 结构调整：把首页内容放到Route内部，让路由控制它的显示，而不是默认全局渲染

这样修改后，当你点击Login按钮跳转到/login时，页面就只会显示导航栏、登录表单和Footer，首页的Carousel、Cards等内容就会被隐藏啦！

内容的提问来源于stack exchange，提问作者Jananath Banuka