我有这些场景
设置页面 -> 结果页面 -> 详细信息页面
用户选择设置，点击下一步，获得结果，然后点击进入更多细节。
详情页面 -> 结果页面
用户从详细信息页面返回结果页面。这会导致完全重新渲染，导致我毫无意义地再次访问服务器（我将结果存储在数组中）。
详情页 -> 结果页 -> 设置页 -> 结果页
用户转到详细信息，然后返回结果（想要获取存储的结果），然后返回设置页面，进行更改，然后返回结果页面（现在我想再次从服务器获取完整数据）。
我想知道 react 路由器中是否有确定我是通过浏览器历史记录进入页面还是向前移动的。
我一直在寻找同样的东西，然后我终于找到了一个看起来很简单的解决方案。
快速回答：
我使用history.actionvalue 来确定用户是来自后退按钮还是来自经典导航。如果history.action等于'POP'则后退按钮已被击中。否则就是'PUSH'。
详细解答：
我可以在每个页面的props中访问历史记录，因为我做了这样的事情：
<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;
在 React Router 中，如果路由器调用该组件的子路径，则该组件保持挂载状态。因此，在您的示例中，您可以执行以下操作：
<Route path="items" component={Results}>
<Route path=":id" component={Detail} />
</Route>
这样，Results组件在安装时不会被卸载，Detail因为它Detail是Results. 但是，如果您不希望在 Detail 中看到 Results 组件被渲染，则只能在其存在时渲染子组件。类似于以下内容：
class Results extends React.Component {
render() {
if (this.props.children) {
// This will enter Detail component
return this.props.children;
}
return (
// Render results component
);
}
}