Reactjs 单击按钮或文本从一个组件移动到另一个组件

我对此的react 是新的. 我有两个组件:Login.js和Signup.js.

从Login.js，我点击一个按钮"注册"，我想启动注册组件作为新的屏幕，它应该占据整个区域.

Index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Login from './components/Login';

import reportWebVitals from './reportWebVitals';
import {BrowserRouter, HashRouter} from "react-router-dom" 

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HashRouter>
    <Login />
  </HashRouter>,

);
reportWebVitals();

登录.js:

import React, { Component } from 'react';
import "../styles.css";
import SignUp from './SignUp';


export default class Login extends Component {

  constructor(props){
    super(props);
    this.state = {errorMessages : {},
              isSubmitted : false,
                isShown : false
              };
    this._onButtonClick = this._onButtonClick.bind(this);
  }
  _onButtonClick() {
    this.setState({isShown : true});
  }

render() {
    const signUp = (
      <div>
         <label>Not Registered Yet? </label>
         <div>
            <button onClick={this._onButtonClick}>Button</button>
            {this.state.isShown ? <SignUp /> :null}
         </div>
    
      </div>  
    );



  return (
    <div className="app">
        <div className='image'>
            <img src="/Logo.png" alt="image" />   
        </div>
        <div>{signUp}</div>
      <div className="login-form">
        <div className="title">Sign In</div>
        {this.state.isSubmitted ? <div>User is successfully logged in</div> : renderForm}
      </div>
    </div>
  );
}

登录组件用户界面使用renderForm显示，其中包含简单的输入字段和提交按钮.此外，这个屏幕包含注册按钮，点击它我想启动注册组件. 目前，注册屏幕[包含仅有3个输入字段的表单]仅显示在登录组件/屏幕的顶部.

我想将注册组件显示为新屏幕，这样登录屏幕就看不到了. 怎么做呢？

谢谢