How to control multiple React js components?

发布于 2020-04-10 16:01:56

I'm building a web application using React for front-end development, I'm really new to react but however i understand the main concepts.

Right now i have and index page which is rendered through my App.js file, here is some code :

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;

And as you can see i'm using two Components in two different files, Login and Register. Everything is working fine, but the issue i have is when i click the Link the application renders the h1 that supposed to be rendered, but the thing is that it shows up AFTER my main container, here is the image :

(The logo and the two LINKS are in the app.js code)

My question is : is there any way to control the first component to be removed (logo and the two links) after the LINK click event happens and render only login/register forms without using Javascript or jquery ?

Thank you in advance !

Ismael Padilla 2020-02-02 00:10

There are several ways to go about this. I'd suggest putting your main container (i.e. your logo and whatever else you want in your landing page) in another component (let's call it Main), then render that Main component in separate route like such:

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

Specifying exact path="/" means that the pattern will only match if the route is exactly "/". i.e. it will match with myApp.com but not with myApp.com/Login. Now, your Main component would look like:

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

Jesse Lucas 2020-02-02 00:26:12

When i type the URL "localhost:3000/Login" it renders only what 's in the Login component, but when i click the LINK in the MAIN component as you said, nothing happens. P.S : my app.js file contains only Router, Switch, Route and the components, meanwhile every component is in a different file.

Jesse Lucas 2020-02-02 00:52:13

It worked eventually, thank you @IsmaelPadilla.

Related issues

Getting .json is not a function on Promise.all w/fetch

Javascript for loop only giving one output

find array value that index matches another array values

React

Communication between two components using ReactJS

Figma Plugin: callback on file updated

indexof() partial match issue

React useState hook and submit in multi step form

How do i get this firebase data to use it outside the loop?

How to define a font size that scales with browser zoom level?