Как проложить маршрут с одной страницы на другую?

Question

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

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

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

вы можете использовать функцию history.pu sh () для достижения того, что вы хотите

Answer 2

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

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

// render the login page otherwise

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