reactjs - react 路由器|私有(private)路由器上的调用功能

Question

我正在使用React Router 。因为我必须在私有(private)路由器

上调用函数

路线

<Router history={history}>
        <div>
          <Spin spinning={this.props.isloading}>
            <Switch>>
              <Route path="/login" component={Login} />
              <PrivateRoute path="/Dashboard" component={Dashboard} />
              <Route path='*' component={NotFound} />
            </Switch>
          </Spin>
        </div>
      </Router>

私有(private)路线

export const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
            this.validateSession()
            ? <Component {...props} />
            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    )} />
)

我可以调用函数this.validateSession()吗？它显示类型错误。

Answer 1

您需要传递验证函数

<Router history={history}>
        <div>
          <Spin spinning={this.props.isloading}>
            <Switch>>
              <Route path="/login" component={Login} />
              <PrivateRoute validate={this.validateSession.bind(this)} path="/Dashboard" component={Dashboard} />
              <Route path='*' component={NotFound} />
            </Switch>
          </Spin>
        </div>
      </Router>



export const PrivateRoute = ({ component: Component, validate, ...rest }) => (
    <Route {...rest} render={props => (
            validate()
            ? <Component {...props} />
            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    )} />
)