我有这些场景
设置页面 -> 结果页面 -> 详细信息页面
用户选择设置,单击下一步,获取结果,然后单击查看更多详细信息。
详情页 -> 结果页
用户从详细信息页面返回结果页面。这会导致完全重新渲染,导致我毫无意义地再次访问服务器(我将结果存储在数组中)。
详细信息页面 -> 结果页面 -> 设置页面 -> 结果页面
用户转到详细信息,然后返回结果(想要抓取存储的结果),然后返回设置页面,进行更改,然后返回结果页面(现在我想再次从服务器完全抓取)。
我想知道反应路由器是否有办法确定我是否通过浏览器历史记录来到该页面,或者我是否正在向前移动。
我一直在寻找同样的事情,然后我终于找到了一个看似简单的解决方案。
快速回答:
I use history.action
值来确定用户是来自后退按钮还是来自经典导航。
如果history.action
等于'POP'
然后后退按钮被按下。否则就是'PUSH'
.
详细解答:
我可以访问每个页面的道具中的历史记录,因为我做了类似的事情:
<Provider store = { store }>
<AppRouter />
</Provider>
Where AppRouter
is:
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;
And 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;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)