React Idle Timer with BrowserRouter

Question

我正在尝试使用 React 空闲计时器在 15 分钟后进入锁定屏幕。

我遇到的问题是重定向页面。我正在使用带有反应的电子和反应浏览器路由器。因此，我无法使用 window.location.assign('/clock'(;(或类似的 window.location( 方法来重定向页面。通常在我的组件中，我使用：

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

这适用于浏览器路由器交换机内的组件。但是，我需要 React Idle Timer 处于顶层，当我在 onIdle 函数中使用 props.history.push 时，我会收到以下消息：

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'(;

这似乎只是将/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();

然后将空闲计时器放在路由器中。浏览器路由器似乎不像路由器在这种情况下那样处理历史记录。

<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函数中，你可以这样做："whatevervariableyoupassashistoryfromonidle".push("/clock"(。

Answer 2

   If you are using tsx means ,
      _onIdle=(e)=> {
          window.location.href = "/your_location";
       }
    or if you are using js means,
      _onIdle=(e)=> {
          window.location = "/your_location";
       }
<IdleTimer
          ref={ref => {
            this.idleTimer = ref;
          }}
           element={document}
      onActive={this.onActive}
      onIdle={this.onIdle}
      onAction={this.onAction}
          debounce={250}
          timeout={1000 * 60 * 15}  // 15 minutes
        />