温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - How to control multiple React js components?
frontend javascript react-router-dom reactjs

javascript - 如何控制多个React js组件?

发布于 2020-04-10 16:49:07

我正在使用React开发前端应用程序的Web应用程序,我真的很新,但是我了解主要概念。

现在我有一个通过我的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;

如您所见,我正在两个不同文件(登录和注册)中使用两个组件。一切工作正常,但是我遇到的问题是,当我单击“ 链接”时,应用程序将渲染应该渲染的h1,但问题是它在我的主容器之后显示,这是图像:

(徽标和两个LINKS在app.js代码中)

在此处输入图片说明

我的问题是:有什么方法可以控制发生LINK click事件后要删除的第一个组件(徽标和两个链接),并且仅呈现登录/注册表单,而无需使用Javascript或jquery?

先感谢您 !

查看更多

提问者
Jesse Lucas
被浏览
57
Ismael Padilla 2020-02-02 00:10

有几种方法可以解决此问题。我建议将您的主容器(即徽标和登录页面中您想要的其他内容)放在另一个组件中(让我们称之为Main),然后Main在单独的路线中渲染该组件,例如:

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

指定exact path="/"意味着仅当路由正好为 “ /”时,模式才会匹配即它将与myApp.com但不匹配myApp.com/Login现在,您的Main组件将如下所示:

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