Question

我是React Router的新手，正在尝试使用新的Conext API从提供商内部进行重定向。基本上我的提供者是这样的。

/* AuthContext.js */

class AuthProvider extends React.Component {

  state = { isLoggedIn: false }

  constructor() {
    super()
    this.login = this.login.bind(this)
    this.logout = this.logout.bind(this)
  }

  login() {

    this.setState({ isLoggedIn: true })

    // Need to redirect to Dashboard Here

  }

  logout() {
    this.setState({ isLoggedIn: false })
  }

  render() {
    return (
      <AuthContext.Provider
        value={{
          isLoggedIn: this.state.isLoggedIn,
          login: this.login,
          logout: this.logout
        }}
      >
        {this.props.children}
      </AuthContext.Provider>
    )
  }
}

const AuthConsumer = AuthContext.Consumer

export { AuthProvider, AuthConsumer }

我已经阅读了很多有关如何使用props传递历史对象以及如何使用组件的信息，但是我看不到这些方法在这里如何工作。我的上下文提供程序位于树的顶部，因此它不是路由器的子级，因此我无法传递道具。它也不是标准组件，因此我不能只是插入一个组件，除非我误解了某些东西（这很有可能）。

编辑：似乎要使用Router，但是如何在上面的代码中导出我的AuthProvider，以便在我的登录功能中可以使用history.push？如您所见，我正在导出用{}包装的多个组件，那么您可以将其中之一包装在HOC中，是否必须显式地传递历史记录，或者它始终在被包装的组件内部可用？

Answer 1

使用withRouter之类的东西可以访问历史记录。

 const AuthButton = withRouter( ({ history }) =>history.push("/"));

尝试一下：

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

  class AuthProvider extends React.Component {
    yourFunction = () => {
      doSomeAsyncAction(() =>
        this.props.history.push('/dashboard')
      )
    }

    render() {
      return (
        <div>
          <Form onSubmit={ this.yourFunction } />
        </div>
      )
    }
  }

  export default withRouter(AuthProvider);

最佳说明可以在这里找到：Programmatically navigate using react router

从上下文提供者重定向React Router

1 个答案: