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（）函数来实现所需的功能

Answer 2

您并不遥远，例如，可以使用React Router渲染Redirect组件以执行从一页到另一页的HTTP重定向。

cropImage = dartimage.copyCrop(image, 4, 0, 100, 100); 

     Expanded(
                child: Container(

                  child: cropImage != null ? Image.memory(cropImage.getBytes()): Text('No Image'),
                ),
              ),

然后在════════ Exception caught by image resource service ════════════════════════════════════════════════ The following _Exception was thrown while resolving an image: Exception: Could not instantiate image codec. When the exception was thrown, this was the stack: #0 _futurize (dart:ui/painting.dart:4304:5) #1 instantiateImageCodec (dart:ui/painting.dart:1682:10) #2 PaintingBinding.instantiateImageCodec (package:flutter/src/painting/binding.dart:88:12) #3 MemoryImage._loadAsync (package:flutter/src/painting/image_provider.dart:714:18) #4 MemoryImage.load (package:flutter/src/painting/image_provider.dart:706:14) ... Image provider: MemoryImage(_Uint8ArrayView#a573e, scale: 1.0) Image configuration: ImageConfiguration(bundle: PlatformAssetBundle#c13af(), devicePixelRatio: 4.0, locale: de_DE, textDirection: TextDirection.ltr, platform: android) Image key: MemoryImage(_Uint8ArrayView#a573e, scale: 1.0) ════════════════════════════════════════════════════════════════════════════════════════════════════内，您可以通过if (httpData) return <Redirect to={{ pathname: '/landing', state: { key: httpData.key } }} />; // render the login page otherwise访问密钥。

如何从一页路由到另一页？

2 个答案: