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

如果http响应成功，我试图将页面路由到新页面，即登录页面。 我已经编写了处理http请求及其工作正常和返回响应的代码，如果我的响应成功或登录成功，即true，那么我想移动到下一页，即我的组件

，带有一些参数。如果我的响应失败，那么它应该在同一页上

基本上我是在尝试，当我点击登录按钮时，它应该发送一个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;

const Login=（）=>{
const[userName，setUserName]=useState（“”）
const[userPassword，setUserPassword]=useState（“”）
常量handleUsernameInput=（事件）=>{
setUserName（event.target.value）；
console.log（“输入用户名”）
}
const handlePasswordInput=（事件）=>{
setUserPassword（event.target.value）；
控制台日志（“输入密码”）
}
const[httpData，apiMethod]=useHttpPOSTHandlerdotthen（）
常量handleSubmit=（）=>{
apiMethod（{url:'url'，数据：{“密码”：用户密码，“用户名”：用户名}}）
setUserName（“”）
setUserPassword（“”）
下一页（）；
}
常量下一页=（）=>{
if（httpData）{
返回
}
否则{
返回
}
}
返回(
handleUsernameInput（事件）}
/>
handlePasswordInput（事件）}
/>
登录
);
};
导出默认登录；

我想你会在另一个线程中找到你需要的所有信息：

使用

history

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

---

您可以使用history.push（）函数来实现您想要的功能

您不远，您可以在使用React Router时呈现组件以执行从一个页面到另一个页面的HTTP重定向，例如

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

// render the login page otherwise

if（httpData）返回；
//以其他方式呈现登录页面

---

然后在

着陆

内，您可以通过

this.props.location.state.key

Hi@James在哪里添加此代码？在jsx内部，或者我应该创建一个函数并将此代码放在这个函数中并调用它吗function@ParthTiwari就在您呈现登录表单之前，为了简洁起见，我省略了大部分代码（由

//否则呈现登录页面
指示）嗨@James我刚刚更新了代码，但仍然没有呈现并移动到下一页代码编辑too@ParthTiwari这是因为您实际上没有呈现查看代码的
重定向
，调用
nextPage
，它会在内部返回
重定向
，但
handleSubmit
不会返回此操作的结果（
重定向
需要由组件渲染）。在您的示例中，去掉
nextPage
函数，而是将我在示例中显示的代码放在一起，您应该看到，当HTTP请求完成时，页面将重定向。@ParthTiwari我已经给出的说明的哪一部分您不明白？我已经添加了一个简短的例子。。。