Передача компонента HO C на все другие ваши маршруты в режиме резервирования

Question

У меня есть компонент HO C, который использует IdleTimer. Я создаю функцию времени ожидания для выхода пользователя из системы через определенное время в моем приложении-редуксе. Мне трудно передать это другим маршрутам. Как лучше всего подойти к этому?

HO C (IdleTimer)

import IdleTimer from "react-idle-timer";
import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { Switch, Route } from 'react-router-dom'

export default function HOC (AutoLogoutComponent) {
 return class extends Component{
      idleTimer;

      constructor(props) {
          super(props);

          this.state = {
              timeout:      1000*5,
              showModal:    false,
              userLoggedIn: false,
              isTimedOut:   false
          };

          this.idleTimer = null;
          this.onAction = this._onAction.bind(this);
          this.onActive = this._onActive.bind(this);
          this.onIdle = this._onIdle.bind(this);

      }

      _onAction(e){
          console.log('User did something', e);
          this.setState({isTimedOut: false})
      }

      _onActive(e){
          console.log('user is active', e);
          this.setState({isTimedOut: false})
      }

      _onIdle(e){
          console.log('user is idle', e);
          const isTimedOut = this.state.isTimedOut;
          if (isTimedOut){
              this.props.history.push('/')
          }else {
              this.setState({showModal: true});
              this.idleTimer.reset();
              this.setState({isTimedOut: true})
          }
      }

    render() {
        const { match } = this.props;
        return (
            <div>
                <IdleTimer
                    ref={ref => {this.idleTimer = ref}}
                    element={document}
                    onActive={this.onActive}
                    onIdle={this.onIdle}
                    onAction={this.onAction}
                    debounce={250}
                    timeout={this.state.timeout} />

                    <div className="">
                        <Switch>
                            <Route
                               exact path={`${match.path}/sales-analysis/dashboard`}
                                render={(props) => <DefaultLayout {...props} /> }/>
                            />
                        </Switch>
                    </div>
            </div>
        )
    }

 }
}
    HOC.propTypes = {
        match: PropTypes.any.isRequired,
        history: PropTypes.func.isRequired
    };

my Index. js файл, где мои маршруты.

 render() {
    return (
      <Provider store={this.props.store}>
        <PersistGate loading={<div />} persistor={this.props.persistor}>
          <BrowserRouter>
            <div id="browserRouter">
              <Route exact path="/" component={LoginContainer} key="login" />
              <Route
                path="/change-password"
                component={LoginContainer}
                key="change-password"
              />
              <Route path="/logout" component={Logout} key="logout" />
              <DefaultLayout
                path="/sales-analysis/dashboard"
                component={HOC(DashboardContainer)}
              />
              <DefaultLayout
                path="/sales-analysissbfhghgb"
                component={HOC(ActiveClientsContainer)}
              />
              <DefaultLayout
                path="/sales-analysis/sbs5dygkjgkh"
                component={HOC(ActivityReportsContainer)}
              />
              <DefaultLayout
                path="/sales-analysis/bbebshyfyfu"
                component={HOC(SegmentsContainer)}
              />
              <DefaultLayout path="/adfserv" component={ProspectsContainer} />
              <DefaultLayout
                path="/preferences/general"
                component={HOC(PreferenceGeneral)}
              />
              <DefaultLayout
                path="/preferences/sdfgsverv"
                component={HOC(PreferenceAccountManager)}
              />
              <DefaultLayout
                path="/preferences/sdvs3esdfvsd"
                component={HOC(PreferenceFlexFields)}
              />
              <DefaultLayout
                path="/preferences/osbrddfsf"
                component={HOC(PreferenceOEMManager)}
              />
              <DefaultLayout
                path="/preferences/users"
                component={HOC(PreferenceUsers)}
              />
              <DefaultLayout
                path="/preferences/group-users"
                component={HOC(PreferenceGroupUsers)}
              />
            </div>
          </BrowserRouter>
        </PersistGate>
      </Provider>
    );
  }
}
AppEntry = HOC(AppEntry);

магазин

function configureStore() {
  let store = createStore(
    reducer,
    composeEnhancers(
      applyMiddleware(
        //onSuccessMiddleware, may not need this...
        axiosMiddleware(API, apiOptions),
        thunk,
        notificationMiddleware
      )
    )
  );
  let persistor = persistStore(store);

  return { persistor, store };
}

Answer 1

Когда вы звоните HOC(SegmentsContainer), вы обычно пытаетесь обернуть свой SegmentsContainer каким-то новым кодом, верно?

А в контексте вашего HO C, function HOC (AutoLogoutComponent), ваш SegmentsContainer заканчивается тем, что ему присваивается имя AutoLogoutComponent.

Теперь я не эксперт по компонентам высшего порядка, но, вообще говоря, внутри вашего HO C вы бы хотели на самом деле визуализировать AutoLogoutComponent где-то. В противном случае мне кажется, что вы принимаете это в качестве аргумента, а затем выбрасываете его. И это то, что вы делаете здесь. Вы нигде не используете этот аргумент в вашей функции рендеринга.

[edit] посмотрите на пример здесь . Официальные документы. У них есть компонент более высокого порядка, function withSubscription(WrappedComponent, selectData), и они визуализируют WrappedComponent в своей функции визуализации