web-dev-qa-db-ja.com

Reactルーターv4-アプリケーション内のページのリロード時にホームにリダイレクトする

ユーザーがアプリケーション内の他のページを更新したときに、ホームページにリダイレクトする必要があります。使ってます React routerv4およびredux。リロード時にストアが失われるため、リロードされたページユーザーは空になります。したがって、以前に保存されたデータを必要としないページにユーザーを戻したいと思います。 localStorageの状態を保持したくありません。

イベントonloadでこれを処理しようとしましたが、機能しませんでした。

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

RefreshRouteなどの新しいルートコンポーネントを作成して、必要な状態データを確認できます。データが利用可能な場合は、コンポーネントをレンダリングします。それ以外の場合は、ホームルートにリダイレクトします。

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

次に、このRefreshRouteを通常のBrowserRouterと同じように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

ブラウザでユーザールートマップの状態を保持したくないのは驚くべきことですが、react-router！を使用します。この場合の主な解決策は、react-routerを使用しないことです。

使用しない場合は、refreshごとにアプリがアプリのメインビューに戻ります。address barでルートマップを何の反応もなく表示したい場合は、JavaScripthistorypushStateを使用してください。

それがあなたを助けることを願っています。

0
AmerllicA