Question

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

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

automaticRefresh

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 =＆＃34; http://yoururl.com＆＃34;。

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

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

1 个答案: