Navigieren zu einer bestimmten Seite nach einer bestimmten Zeit der Inaktivität des Benutzers

Question

Ich versuche zu navigieren oder Homepage-Komponente in React-Anwendung nach einer bestimmten Zeit der Inaktivität des Benutzers anzuzeigen.

Ich habe funktioniert automaticRefresh Funktion, die Leerlaufzeit durch DOM Ereignisse erkennt und Anwendung nach 2 Minuten neu lädt. Die Funktion wird in index.js Datei aufgerufen.

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 
    } 
} 

Wie Sie in timerElapsed Funktion sehen kann ich Seite neu geladen und es funktioniert gut, aber ich hatte eine neue Aufgabe, das zu ändern zur Startseite navigieren können. Bereits im App-Container habe ich alle meine Komponentenlogik, die Statement oder Home Komponente zu zeigen.

App Container

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

Wie Hauptkomponente nach gewisser Zeit der Inaktivität zu zeigen, ohne Router reagieren?

Answer 1

Ich habe eine Antwort geschrieben, aber danach realisiert, dass Sie keinen Router verwenden möchten. In diesem Fall tun Sie window.location = "http://yoururl.com".

Dies funktioniert nur, wenn es sich um ein echtes Ziel und nicht um eine Reaktionsroute handelt. Wenn es sich um eine Reaktionsroute handelt, die Sie treffen möchten, benötigen Sie einen Router.