reactjs - 如何从一个页面路由到另一个页面？

Question

如果我的 http 响应成功到新页面(即登陆页面)，我会尝试路由该页面。我已经编写了用于处理 http 请求的代码，其工作正常并返回响应，如果我的响应成功或登录成功(即 true)，那么我想移至下一页，即我的组件 <Loading />使用一些参数，如果我的响应失败，那么它应该在同一页面上

基本上，当我单击登录按钮时，它应该发送一个http请求，如果请求返回响应，那么它应该切换到另一个页面，否则它应该在同一页面上

const Login = () => {

    const [userName , setUserName] = useState("")
    const [userPassword , setUserPassword] = useState("")


    const handleUsernameInput = (event) => {
        setUserName(event.target.value);
        console.log("username entered")
    }

    const handlePasswordInput = (event) => {
        setUserPassword(event.target.value);
        console.log("password entered")
    }

    const [httpData, apiMethod] = useHttpPOSTHandlerdotthen()

    const handleSubmit = () => {
        apiMethod({url: 'url' , data: { "password": userPassword, "username": userName }})
        setUserName("")
        setUserPassword("")
        nextPage();
    }

    const nextPage = () => {
        if (httpData) {
        return <Redirect to={{ pathname: '/landing', key: httpData.key}} />
        }
        else{
            return <Redirect to={{ pathname: '/' }} /> 
        }
    }

    return (
        <div className = "login-page">
            <Form>
                <Form.Control size = "sm" 
                  type="text" 
                  placeholder="Username" 
                  value = {userName}
                  onChange = {event => handleUsernameInput(event)} 
                  />
                <Form.Control size = "sm" 
                     type="password" 
                     placeholder="Password" 
                     value = {userPassword}
                     onChange = {event => handlePasswordInput(event)} 
                     />
                <Button size = "sm" variant="success" 
                onClick = {handleSubmit}>Login</Button>
            </Form>
        </div>
    );
};

export default Login;

Answer 1

我想您会在另一个线程中找到您需要的所有信息:How to push to History in React Router v4?

使用history是管理页面之间“移动”的简单而有效的方法

你可以使用history.push()函数来实现你想要的