webentwicklung-frage-antwort-db.com.de

Reagieren Sie auf Router v4

Ich muss zur Homepage umleiten, wenn der Benutzer andere Seiten in meiner Anwendung aktualisiert. Ich verwende React router v4 und redux. Da der Speicher beim Neuladen verloren geht, ist der neu geladene Seitenbenutzer jetzt leer, und daher möchte ich ihn zu einer Seite zurückführen, die keine zuvor gespeicherten Daten benötigt. Ich möchte den Status in localStorage nicht beibehalten.

Ich habe versucht, dies in Ereignis onload zu behandeln, aber es hat nicht funktioniert:

window.onload = function() {
    window.location.path = '/aaaa/' + getCurrentConfig();
};
reactjsreduxreact-routerreact-reduxreact-router-v4
2
Vishal Gulati

Sie können versuchen, eine neue Routenkomponente zu erstellen, beispielsweise RefreshRoute, und nach Statusdaten suchen, die Sie benötigen. Wenn die Daten verfügbar sind, rendern Sie die Komponente "else" und leiten Sie sie zur Home-Route weiter.

import React from "react";
import { connect } from "react-redux";
import { Route, Redirect } from "react-router-dom";

const RefreshRoute = ({ component: Component, isDataAvailable, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isDataAvailable ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/home"
          }}
        />
      )
    }
  />
);

const mapStateToProps = state => ({
  isDataAvailable: state.reducer.isDataAvailable
});

export default connect(mapStateToProps)(RefreshRoute);

Verwenden Sie nun diese RefreshRoute in Ihrer BrowserRouter wie eine normale Route.

<BrowserRouter>
  <Switch>
    <Route exact path="/home" component={Home} />
    <RefreshRoute exact path="dashboard" component={Dashboard} />
    <RefreshRoute exact path="/profile" component={ProfileComponent} />
  </Switch>
</BrowserRouter>
2
Murli Prajapati

Es ist so erstaunlich, dass Sie den Status der Benutzerroutenkarte im Browser nicht beibehalten möchten, aber react-router verwenden! Die Hauptlösung für Ihren Fall ist react-router nicht verwenden.

Wenn Sie es nicht verwenden, kehrt die App nach jedem refresh zur Hauptansicht der App zurück. Wenn Sie die Routenkarte in address bar ohne Reaktion anzeigen möchten, verwenden Sie JavaScripthistorypushState.

Hoffe es hilft dir.

0
AmerllicA