Блог

Я работаю над веб-приложением ReactJS, я застрял в этой проблеме. Я хочу использовать или любой другой метод для перенаправления на другую страницу после проверки значения с сервера. Я пробовал это :

       <Link to='/Upload'>
          <Button
          variant="contained"
          color="primary"
          onClick={async () => {
            await verificationp(phone, code).then(async (result) => {
              if ((await result) === true) {
                //I want to redirect to another page
              } else {
                //I want to display an alert
              }
            });
          }}
        >
          Submit
        </Button>
    </Link>
  

Вам не нужно использовать компонент Link в этом примере. Попробуйте использовать реквизит истории (props.history.push(‘/’)) Смотрите приведенные ниже примеры, последний должен относиться к вам:

В вашем App.js маршрутизатор:

 <Switch>
  <Route path="/auth" component={Auth} />
  <Route path="/errorpage" component={ErrorPage} />
  <Route path="/" exact component={HomeScreen} />
  <Redirect to='/' />
</Switch>
  

На странице, на которую вы хотите перенаправить:

 import React, { useState } from 'react'

const Auth = props => {

    const [form, setForm] = useState({
        data: {
            email: '',
            password: ''
        }
    })

    const authHandler = async (event) => {
        event.preventDefault()
        try {
            // await dispatch(action) // dispatch to redux or send a fetch
            props.history.push('/')  // redirects if no errors
        } catch (err) {
            props.history.push('/errorpage')  // redirects if an error
        }
    }

    const inputChangedHandler = e => {
        setForm({
            ...form,
            data: {
                ...form.data,
                [e.target.id]: e.target.value
            }
        })
    }

    return (
        <div>
            <form onSubmit={authHandler}>
                <input id='email' type='email' value={form.data.email} onChange={inputChangedHandler} />
                <input id='password' type='password' value={form.data.password} onChange={inputChangedHandler} />
                <button type='submit'>Login</button>
            </form>
        </div>
    )
}

export default Auth
  

В вашем случае попробуйте следующее: если страница находится в стеке маршрутов, будет доступен реквизит истории, или вам придется использовать withRouter или useHistory hook, чтобы получить доступ к реквизиту истории.

 const clickHandler = () => {
     try {
         // await dispatch(action)
         props.history.push('/')  // redirects
     } catch (err) {
         props.history.push('/errorpage')  // redirects
     }
}

return (<button type='button' onClick={clickHandler}>Click Me</button)
  

Вот документ о перенаправлении

Я думаю, лучшее, что вы можете сделать, это создать отдельную функцию для onClick и изменить состояние на перенаправление, чтобы таким образом вы могли предотвратить некоторые действия пользователя во время выполнения запроса

 const [redirectTo, setRedirectTo] = useState('');

const chekcfromServer = async () => {
  await verificationp(phone, code).then(async (result) => {
    if ((await result) === true) {
      setRedirectTo('/somewhereinyour/application')
    } else {
      // I want to display an alert
    }
  });
};
  

и когда в рендеринге

 return (
    <>
        redirectTo amp;amp; <Redirect to={{pathname: redirectTo }} />
       ...rest of your code
    </>
)
  

Вы можете использовать «перенаправление» из «react-router-dom»

Пример:

     import { Redirect } from "react-router-dom";

    <Link to='/Upload'>
          <Button
          variant="contained"
          color="primary"
          onClick={async () => {
            await verificationp(phone, code).then(async (result) => {
              if ((await result) === true) {
                //I want to redirect to another page

                return <Redirect to="your_url" />

              } else {
                //I want to display an alert
              }
            });
          }}
        >
          Submit
        </Button>
    </Link>
  

Я склонен использовать state system (Redux) для решения этой проблемы.

Итак, моя проблема заключалась в том, что я хотел запустить событие.preventDefault (), чтобы остановить нажатие на ссылку, но затем я хотел выполнить вызов API после этого (чтобы проверить статус входа, поскольку это было сложное устройство IoT) и щелкнуть ссылку, если проверка прошла нормально, но не нажимать на ссылку, если это не так. Однако событие.Функция preventDefault () остановила меня, потому что она отменяет любые события (я уверен, что есть более приятные способы добиться этого! но временные ограничения и все такое).

Я решил это с помощью:

1. Наличие моей обычной асинхронной функции с event.preventDefault() внутри нее.
2. В рамках первого вызова я устанавливаю некоторое состояние в Redux, просто базовое логическое значение.
3. Если проверка API прошла успешно, то я снова вызываю ту же функцию click (используя .click()) и обхожу событие.preventDefault() благодаря Redux (затем сбрасываю состояние впоследствии), что приводит к повторному перенаправлению. Если проверка завершилась неудачей, я вывожу сообщение об ошибке и больше не показываю (очевидно, при обновлении Redux).

Система управления состоянием внутри React очень мощная. Вы можете делать некоторые хакерские вещи! но иногда другие «правильные» решения не работают для вас; например, функциональность history props, которую вы можете обойти другими способами через управление состоянием.