特定のユーザーの非アクティブ時間が経過した後、特定のページに移動します。

Question

一定期間ユーザーが非アクティブになった後、リバースアプリケーションでホームページコンポーネントを表示または表示しようとしています。

私は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> 
    ); 
    } 
} 

それでは、どのルーターなしで反応させ、一定の時間が経過するホーム・コンポーネントを表示するには？

Answer 1

私は応答を投稿しましたが、その後はルータを使用したくないと認識しました。その場合は、window.location = "http://yoururl.com"を実行します。

これは実際の目的地であり、反応ルートでない場合にのみ機能します。ヒットしたい反応ルートの場合は、ルータが必要です。