как показать разные компоненты при рендеринге.я получаю регистрацию и вход на той же странице

Question

class Login extends React.Component {
    render() {
      return (
        <div align='center'>
        <h1>Sign in</h1>
        <input type="email" id="email" placeholder="Email ID" />
        <br/>         
        <input type="password" id="password" placeholder="Password" />
        <br/>          
        <HashRouter>
        <div>
        <Link to="/Signup">
        <button type="button" onClick={this.buttonClicked }> Signup </button>
           </Link>
          <div>
            <Route path="/Signup" component={Signup}/>
          </div>
        </div>
        </HashRouter>
      </div>      
      )
    }
  }

Answer 1

Все, что вам нужно сделать, это определить маршрут регистрации вне компонента входа в систему.Желательно, чтобы вы указали его в том же месте, где вы определяете маршрут входа

App.js

<HashRouter>
    <Switch>
        <Route path="/login" component={Login} />
        <Route path="/Signup" component={SignUp} />
    </Switch>
</HashRouter>

И вход

class Login extends React.Component {
    render() {
      return (
        <div align='center'>
        <h1>Sign in</h1>
        <input type="email" id="email" placeholder="Email ID" />
        <br/>         
        <input type="password" id="password" placeholder="Password" />
        <br/>          
        <div>
           <Link to="/Signup">
              <button type="button" onClick={this.buttonClicked }> Signup </button>
           </Link>
        </div>
      </div>      
      )
    }
  }