Реагировать на таймер простоя с BrowserRouter

Question

Я пытаюсь использовать React Idle Timer, чтобы перейти к экрану блокировки через 15 минут.

У меня проблема с перенаправлением страницы. Я использую электрон с реагировать и реагировать BrowserRouter. Из-за этого я не могу использовать window.location.assign ('/ clock'); (или аналогичный метод window.location) для перенаправления страницы. Обычно в моих компонентах я использую:

this.props.history.push("/clock");

Это работает внутри компонентов, которые находятся в коммутаторе BrowserRouter. Однако мне нужно, чтобы таймер простоя React находился на верхнем уровне, и когда я использую props.history.push внутри функции onIdle , я получаю сообщение:

Uncaught TypeError: Cannot read property 'push' of undefined

class AppRouter extends Component {
  constructor(props) {
    super(props);
    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);
  }

  _onActive(e) {
    console.log("user is active", e);
    console.log("time remaining", this.idleTimer.getRemainingTime());
  }

  _onIdle(e) {
    console.log("user is idle", e);
    console.log("last active", this.idleTimer.getLastActiveTime());

//need to push to  /clock after 15 minutes
//window.location.assign('/clock');  -- WORKS in browser, but not with Electron

// this.props.history.push("/clock"); -- gives Uncaught TypeError: Cannot read property 'push' of undefined

//can't place <IdleTimer inside BrowserRouter because it only allows 1 thing within.

  }

  render() {
    return (
      <div>
        <IdleTimer
          ref={ref => {
            this.idleTimer = ref;
          }}
          element={document}
          onActive={this.onActive}
          onIdle={this.onIdle}
          onAction={this.onAction}
          debounce={250}
          timeout={1000 * 60 * 0.1}
        />

        <BrowserRouter>
          <div>
            <Switch>
              <Route path="/institution" component={Institution} />
              <Route path="/location" component={Location} />
              <Route path="/timezone" component={TimeZone} />
              <Route path="/clock" component={Clock} />
              <Route path="/" component={PreflightCheck} />
            </Switch>
          </div>
        </BrowserRouter>
      </div>
    );
  }
}


ReactDOM.render(<AppRouter />, document.getElementById("root"));

Как правильно перенаправить компонент на верхний уровень вне тегов BrowserRouter?

Я также пробовал это:

import { createHashHistory } from 'history'
export const history = createHashHistory()

, а затем вызывать history.push ('/ clock');

Это только добавляет / часы к текущей странице, на которой я нахожусь, и я получаю это сообщение:

Hash history cannot PUSH the same path; a new entry will not be added to the history stack

Answer 1

Создать историю (вы можете использовать историю установки npm):

import { createBrowserHistory } from "history";
const history = createBrowserHistory();

Затем поместите таймер простоя в маршрутизатор. Кажется, что BrowserRouter не работает с историей, как это делает Router в этой ситуации.

<Router history={history}>
      <div>

  <IdleTimer
          ref={ref => {
            this.idleTimer = ref;
          }}
          element={document}
          onActive={this.onActive}
          onIdle={() =>  this.checkplayerstatus(history)}
          onAction={this.onAction}
          debounce={250}
          timeout={1000 * 60 * 15}
        />
        <Switch>
          <Route path="/institution" component={Institution} />
          <Route path="/location" component={Location} />
          <Route path="/timezone" component={TimeZone} />
          <Route path="/clock" component={Clock} />
          <Route path="/" component={PreflightCheck} />
        </Switch>
      </div>
    </>

И затем в функции onIdle вы можете сделать это: "anyvariableyoupassashistoryfromonidle" .push ("/ clock").