React Router | функция вызова на частном маршрутизаторе

Question

Я использую React Router . В том, что я должен вызвать функцию на private router

Маршрут

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

PrivateRoute

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

Вы должны просто передать валидацию как реквизит компоненту PrivateRoute

<PrivateRoute path="/Dashboard" validate={this.validateSession} component={Dashboard} />

и ваш компонент будет выглядеть так:

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

Answer 2

Вам нужно передать функцию проверки

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