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

当用户填写登录表单并单击submit按钮时，我想打开另一个组件，这在我的示例中是

。我寻找了太多的方法，但不确定为什么没有一个能与我合作。有没有一种简单的方法可以通过React钩子实现这一点

登录组件

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>

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;

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

function ChildComponent(props) {

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

const submit\u login=（）=>{
//打开组件的代码
}

这是一个非常简单的场景，我相信这应该很容易实现。

---

我尝试了

router

switch

，

hashrouter

，

useHistory

，

hookrouter

，但所有这些都不起作用。我发现的一些解决方案没有更新，因为我使用的是最新版本的ReactJS

下面是一个例子。请查收

ParentComponent

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>

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;

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

function ChildComponent(props) {

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

import React，{useffect，useState}来自“React”；
从“/ChildComponent”导入ChildComponent；
功能组件（道具）{
const[isVisible，setIsVisible]=useState（false）；
功能显示组件（事件）{
setIsVisible（！isVisible）；
}
返回(
{isVisible？'Hide'：'Show'}组件
{
是否可见？：空
}
);
}
导出默认父组件；

ChildComponent

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>

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;

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

function ChildComponent(props) {

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

import React，{useffect，useState}来自“React”；
功能组件（道具）{
返回(
这是子组件
);
}
导出默认子组件；

使用react路由器交换机应该是您真正需要的。您必须以编程方式更改url，或者根据登录后设置的某些状态呈现

。最简单的方法是在某些入门级组件（如顶级

）上放置

currentView

状态，并在其中放置开关盒。登录时，将

currentView

设置为

“HomePage”

，然后开关盒应匹配并呈现您的