reactjs - React Router - 如何确定后退按钮是否被点击？

Question

我有这些场景

设置页面 -> 结果页面 -> 详细信息页面

用户选择设置，点击下一步，获得结果，然后点击进入更多细节。

详情页面 -> 结果页面

用户从详细信息页面返回结果页面。这会导致完全重新渲染，导致我毫无意义地再次访问服务器(我将结果存储在数组中)。

详情页 -> 结果页 -> 设置页 -> 结果页

用户转到详细信息，然后返回结果(想要获取存储的结果)，然后返回设置页面，进行更改，然后返回结果页面(现在我想再次从服务器获取完整数据)。

我想知道 React 路由器中是否有离开来确定我是通过浏览器历史记录来到该页面还是我正在前进。

Answer 1

我一直在寻找同样的东西，然后我终于找到了一个看起来很简单的解决方案。

快速解答:

我用 history.action值来确定用户是来自后退按钮还是来自经典导航。
如 history.action等于 'POP'然后后退按钮已被击中。否则是 'PUSH' .

详细解答:

我可以访问每个页面的 Prop 中的历史记录，因为我做了这样的事情:

<Provider store = { store }>
    <AppRouter />
</Provider>

哪里 AppRouter是:

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import PublicRoute from './PublicRoute';
import PageHome from '../pages/front/home/PageHome';

export const history = createHistory();

const AppRouter = () => (
    <Router history={ history }>
        <div>
            <Switch>
                <PublicRoute
                    exact = { true }
                    path = "/"
                    component = { PageHome }
                    history={ history }
                />
                < ..... Other routes here ..... >
            </Switch>
        </div>
    </Router>
);

export default AppRouter;

和 PublicRoute组件是这样的:

import React from 'react';
import { Route } from 'react-router-dom';
import Header from '../components/header/Header';

const PublicRoute = ( { component: Component, ...rest } ) => (
    <Route
        component={ ( props ) => (
            <div>
                <Header />
                <Component { ...props } />
            </div>
        )}
        { ...rest }
    />
);

export default PublicRoute;