Я пытался перенаправить страницу, если мой http-ответ успешен, на новую страницу, то есть на целевую страницу. Я написал отдельный customHooks для обработки http-запроса и его правильной работы и возврата ответа, если мой ответ успешен или вход в систему успешен, т. Е. Истина, то я хочу перейти на следующую страницу, т.е. мой компонент <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("")
    }

    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>
            {
                httpData ? < Landing key = {httpData.key} /> : <Login/>
            }
        </div>
    );
};

export default Login;

Вот раздел маршрутизатора для страниц маршрутизации, то есть присутствует в app.js

        <Roueter>
        <div>
        <Switch>
        <Route path = '/' exact component ={Login}></Route>
        <Route path = '/landing' exact component ={Landing}></Route>
        </Switch>
        </div>
        </Roueter>

Вот мой компонент целевой страницы

const Landing = () => {
    return (
        <div>
            <p>Entered in Landing  section</p>
        </div>
    );
};

export default Landing;
2
Dunzon 25 Апр 2020 в 22:35

2 ответа

Я думаю, что вы найдете всю необходимую информацию в этой другой ветке: Как перейти к истории в React Router v4?

Использование history - простой и эффективный способ управления "перемещением" между страницами

Вы можете использовать функцию history.push () для достижения желаемого

1
William Scalabre 25 Апр 2020 в 19:42

Вы не далеко, вы можете визуализировать компонент Redirect, чтобы выполнить HTTP перенаправление с одной страницы на другую при использовании React Router, например

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

// render the login page otherwise

Затем внутри Landing вы можете получить доступ к ключу через this.props.location.key.

0
James 25 Апр 2020 в 19:44