Как передать реквизит (метод) с помощью компонента Redirect

Question

Я знаю, как передать состояние для перенаправления компонента, как показано ниже.

<Redirect
    to={{
      pathname: "/login",
      state: { isLoggedIn: this.state.isLoggedIn }
    }}
 />

Однако я не могу найти способ, как передать метод для перенаправления компонента.Я хочу передать метод (handleLogin) для перенаправления компонента, как показано ниже.Не могли бы вы помочь?

<Redirect
    to={{
        pathname: "/login",
        state: { handleLogin: this.handleLogin }
     }}
 />

Answer 1

Я только что столкнулся с подобной проблемой.

В моем случае мне нужно передать функцию компоненту через <Redirect />, поэтому я создал другое свойство для передачи функции.(Извините, если я использовал неправильные терминологии, просто начал кодировать в течение 2 месяцев).

В вашем случае это то, что я бы попробовал.

<Redirect
  to={{
    pathname: "/login",
    handleLogin: this.handleLogin,
    state: { isLoggedIn: this.state.isLoggedIn }
  }}
/>

Answer 2

Вы не можете передать функцию в свойстве состояния для поддержки перенаправления.Разрешены только сериализуемые данные.Это следует за поведением нативного API истории, который используется пакетом истории, который использует реагирующий маршрутизатор.См. эту проблему для более подробной информации.Также обратите внимание на то, что в комментариях часто не рекомендуется использовать состояние

Несмотря на соблазн прохождение состояния через location.state, я бы предостерег от использования его для чего-либо, кроме эфемерных данных.Когда вы переходите непосредственно к странице, location.state всегда имеет значение null, поэтому вам придется иметь встроенные средства защиты, чтобы справиться с этим.

Чтобы обрабатывать различные варианты поведения в форме входа в системуосновываясь на том, откуда они перенаправляются, я, вероятно, передам некоторые сериализуемые данные в строку запроса, а затем использую эти данные, чтобы решить, что делать в компоненте, отображаемом в /login.Вот как то так:

// Redirect
<Redirect to={`/login?param1=a`} />

// Login component
import qs from "qs";

class Login extends React.Component {
  login = () => {
    const { param1 } = qs(this.props.location.search);
    if (param1 === "a") {
      // Do something
    } else {
      // Do something else
    }
  }

  render() {
    <button onClick={this.login} type="button">Login</button> 
  }
}