在给定的用户不活动时间后导航到特定页面

Question

在用户不活动的给定时间段后，我正在尝试在 React 应用程序中导航或显示主页组件。

我正在使用 automaticRefresh 函数，它通过 DOM 事件检测空闲时间并在 2 分钟后重新加载应用程序。 index.js 文件中调用函数。

自动刷新

export default function () {
  let timer;

  window.onload = timerReset;
  document.onkeypress = timerReset;
  document.onmousemove = timerReset;
  document.onmousedown = timerReset;
  document.ontouchstart = timerReset;
  document.onclick = timerReset;
  document.onscroll = timerReset;
  document.onkeypress = timerReset;

  function timerElapsed() {
    window.location.reload();
    // Navigate or show Home page component
  };

  function timerReset() {
    clearTimeout(timer);
    timer = setTimeout(timerElapsed, 2 * 60 * 1000); // 2 mins
  }
}

正如您在timerElapsed 函数中看到的那样，我设置了页面重新加载并且工作正常，但是我有一个新任务要更改，可以导航到主页。 已经在 App 容器中，我有我的所有组件逻辑，Statement 或 Home 组件要显示。

应用容器

import React, { Component } from 'react';
// Components
import Header from './components/Header';
import Home from './components/Home';
import Statement from './components/Statement';

class App extends Component {
  render() {
    const statement = this.props.statement !== null;

    return (
      <div>
        <Header />

        { statement ? <Statement /> : <Home /> }
      </div>
    );
  }
}

那么如何在没有路由器的 React 中在一段时间内不活动后显示 Home 组件？

Answer 1

我发布了回复，但之后意识到您不想使用路由器。在这种情况下，您执行 window.location = "http://yoururl.com"。

这只有在它是一个真正的目的地而不是一个反应路线时才有效。如果它是你想要命中的反应路由，你需要一个路由器。