从上下文提供程序重定向反应路由器 [英] Redirect React Router from Context Provider

问题描述

我是 React Router 的新手，并尝试使用新的 Conext API 从提供程序内部进行重定向.基本上我的提供者看起来像这样.

/* AuthContext.js */类 AuthProvider 扩展 React.Component {状态 = { isLoggedIn: false }构造函数(){极好的()this.login = this.login.bind(this)this.logout = this.logout.bind(this)}登录() {this.setState({ isLoggedIn: true })//需要重定向到仪表板这里}登出() {this.setState({ isLoggedIn: false })}使成为() {返回 (<AuthContext.Provider价值={{isLoggedIn: this.state.isLoggedIn,登录:this.login，注销:this.logout}}>{this.props.children}</AuthContext.Provider>)}}const AuthConsumer = AuthContext.Consumer出口 { AuthProvider, AuthConsumer }

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

看起来要走的路是withRouter，但是如何在上面的代码中导出我的AuthProvider，以便history.push 在我的登录功能中可用?正如您所看到的，我正在导出包装在 {} 中的多个组件，所以您可以将其中一个包装在 HOC 中吗?您是否必须显式传入历史记录，或者它是否始终在被包装的组件内可用?

解决方案

使用 withRouter，像这样可以访问历史记录.

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

试试这个:

 import { Route } from "react-router-dom";类 AuthProvider 扩展 React.Component {yourFunction = () =>{doSomeAsyncAction(() =>this.props.history.push('/dashboard'))}使成为() {返回 (<div><Form onSubmit={ this.yourFunction }/>

)}}导出默认 withRouter(AuthProvider);

最好的解释可以在这里找到:使用反应路由器以编程方式导航

I'm new to React Router and trying to do a redirect from inside a provider using the new Conext API. basically my provider looks like this.

/* 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 }

I've read a lot about how to pass the history object using props and how to use a component but I can't see how these approaches would work here. My context provider sits at the top of the tree so it's not a child of the Router so I can't pass props. It's also not a standard component so I can't just insert a component, unless I've misunderstood something (which is very possible).

Edit: Looks like the way to go is withRouter, but how to export my AuthProvider in the code above so that history.push is available in my login function? As you can see I'm exporting multiple components wrapped in {} so can you wrap one of these in a HOC and do you have to explicitly pass history in or is it always available inside the component that's being wrapped?

解决方案

use withRouter, sth like this to get access of history.

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

Try This:

    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);

Best explanation can be found here: Programmatically navigate using react router

这篇关于从上下文提供程序重定向反应路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！