如何在单击按钮时加载新组件？

Question

当用户填写登录表单并单击submit按钮时，我想打开另一个组件，在我的示例<HomePage />中。我找了很多方法，但不知道为什么没有人和我一起工作。是否只有一个简单的方法来实现这一反应钩子？

登录组件

const submit_login = () =>{
    //code to open <HomePage /> Component
}

<form>
    <div>
        <input type="text" placeholder="username"/>
    </div>
    <div>
        <input type="password" class="form-control" placeholder="password"/>
    </div>
    <div>
        <input type="submit" onClick={submit_login}  value="Login"/>
    </div>
</form>

这是一个非常简单的场景，我认为这应该很容易实现。我试过router switch，hashrouter，useHistory，hookrouter，但是这些都没有用。我发现的一些解决方案没有更新，因为我使用的是最新版本的ReactJS。

Answer 1

这是一个例子。请查查

ParentComponent

import React, {useEffect, useState} from 'react';
import ChildComponent from "./ChildComponent";

function ParentComponent(props) {

    const [isVisible, setIsVisible] = useState(false);

    function showComponent(event) {
        setIsVisible(!isVisible);
    }
    return (
        <div>
            <button onClick={showComponent} >{isVisible? 'Hide':'Show'} Component</button>
            {
                isVisible? <ChildComponent/>:null
            }
        </div>
    );
}
export default ParentComponent;

ChildComponent

import React, {useEffect, useState} from 'react';

function ChildComponent(props) {

    return (
        <div>
            This is child component
        </div>
    );
}
export default ChildComponent;