Javascript 如何控制多个组件？

我正在使用React构建一个用于前端开发的web应用程序，我对React非常陌生，但我理解主要概念

现在我有一个通过App.js文件呈现的索引页面，下面是一些代码：

import React from 'react';
import {BrowserRouter as Router,Route,Link,Switch} from 'react-router-dom';
import Login from './Components/Login.component';
import Register from './Components/Register.component';
import 'bootstrap/dist/css/bootstrap.css';
import './App.css';


function App() {
return (

  <Router>
    <div className="container-fluid blue-container">
      <div className="row justify-content-center">
        <div className="col-lg-5 mx-auto justify-content-center" style={{textAlign:"center"}}>
          <img className="img-fluid img-fluid-logo mt-4" alt="logo" src="logo.png" />
        </div>
      </div>
      <div className="row justify-content-center d-flex align-items-center">
        <div className="col-lg-5 mx-auto justify-content-center d-flex align-items-center" style={{marginTop:"120px",textAlign:"center"}}>
          <Link to="/Login" className="btn btn-primary" style={{marginRight:"10px"}}><i className="fas fa-lock"></i> Se connecter</Link>
          <Link to="/Register" className="btn btn-primary"><i className="fas fa-lock"></i> S'inscrire</Link>
        </div>
      </div>
    </div>
    <Switch>
      <Route path="/Login">
        <Login />
      </Route>
      <Route path="/Register">
        <Register />
      </Route>
    </Switch>
  </Router>


 );
}

export default App;

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Link，Switch}；
从“./Components/Login.component”导入登录名；
从“./Components/Register.component”导入寄存器；
导入'bootstrap/dist/css/bootstrap.css'；
导入“/App.css”；
函数App（）{
返回(
Se连接器
S'inscrire
);
}
导出默认应用程序；

正如你们所看到的，我在两个不同的文件中使用了两个组件，登录和注册。 一切正常，但我遇到的问题是，当我单击链接时，应用程序会渲染应该渲染的h1，但问题是它会在我的主容器之后显示，下面是图像：

（徽标和两个链接在app.js代码中）

我的问题是：在链接点击事件发生后，是否有任何方法可以控制要删除的第一个组件（徽标和两个链接），并且只呈现登录/注册表单而不使用Javascript或jquery

---

提前谢谢你

有几种方法可以做到这一点。我建议将您的主容器（即您的徽标和登录页中您想要的任何其他内容）放入另一个组件（我们称之为

main

），然后将该

main

组件以单独的方式呈现，如下所示：

  <Router>
    <Switch>
      <Route exact path="/">
        <Main />
      </Route>
      <Route path="/Login">
        <Login />
      </Route>
      <Route path="/Register">
        <Register />
      </Route>
    </Switch>
  </Router>

---

使其成为另一个React组件，以便可以使用条件渲染。它基本上是基于由组件状态或道具控制的值来呈现UI的一部分

---

看看这套芭蕾舞。他们很好地解释了它的工作原理。

你应该完全完成反应训练，如果训练后出现任何问题，最好提问，但首先要学习基础知识。试试Youtube，Egghead.完成一个完整的最新课程。我确实完成了Linkedin学习的基本培训，但课程只包含语法和概念教程！当我键入URL“localhost:3000/Login”时，它只呈现登录组件中的内容，但是当我像您所说的那样单击主组件中的链接时，什么也没有发生。注意：我的app.js文件只包含路由器、交换机、路由和组件，同时每个组件都在不同的文件中。

function Main() {
   return(<div className="container-fluid blue-container">
      <div className="row justify-content-center">
        <div className="col-lg-5 mx-auto justify-content-center" style={{textAlign:"center"}}>
          <img className="img-fluid img-fluid-logo mt-4" alt="logo" src="logo.png" />
        </div>
      </div>
      <div className="row justify-content-center d-flex align-items-center">
        <div className="col-lg-5 mx-auto justify-content-center d-flex align-items-center" style={{marginTop:"120px",textAlign:"center"}}>
          <Link to="/Login" className="btn btn-primary" style={{marginRight:"10px"}}><i className="fas fa-lock"></i> Se connecter</Link>
          <Link to="/Register" className="btn btn-primary"><i className="fas fa-lock"></i> S'inscrire</Link>
        </div>
      </div>
    </div>)
}