在React应用中点击返回按钮不会重新加载页面

Question

我有一个用TypeScript编写的React应用程序（16.8.6），该应用程序使用React Router（5.0.1）和MobX（5.9.4）。导航正常运行并应在适当的时候加载数据，但是，当我单击浏览器的“后退”按钮时，URL会更改，但不会更新任何状态，并且页面也不会重新呈现。我已经阅读了有关此问题和withRouter修复的无数文章，我尝试了这些文章，但没有什么不同。

一个典型的用例是导航到摘要页面，选择导致加载新数据和推送新历史记录状态的各种操作，然后再返回几个步骤。大多数历史记录推送都发生在摘要组件中，该组件处理多个路由。我已经注意到，当从摘要页面返回到主页时，将按应有的方式进行重新渲染。

我的index.tsx

import { Provider } from 'mobx-react'
import * as React from 'react'
import * as ReactDOM from 'react-dom'

import App from './App'
import * as serviceWorker from './serviceWorker'
import * as Utils from './utils/Utils'

const rootStore = Utils.createStores()

ReactDOM.render(
    <Provider {...rootStore }>
        <App />
    </Provider>,
    document.getElementById('root') as HTMLElement
)

serviceWorker.unregister()

我的app.tsx

import * as React from 'react'
import { inject, observer } from 'mobx-react'
import { Route, Router, Switch } from 'react-router'

import Home from './pages/Home/Home'
import PackageSummary from './pages/PackageSummary/PackageSummary'
import ErrorPage from './pages/ErrorPage/ErrorPage'
import { STORE_ROUTER } from './constants/Constants'
import { RouterStore } from './stores/RouterStore'

@inject(STORE_ROUTER)
@observer
class App extends React.Component {
    private routerStore = this.props[STORE_ROUTER] as RouterStore

    public render() {
        return (
            <Router history={this.routerStore.history}>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/summary/:packageId" component={PackageSummary} />
                    <Route exact path="/summary/:packageId/:menuName" component={PackageSummary} />
                    <Route exact path="/summary/:packageId/:menuName/:appName" component={PackageSummary} />
                    <Route component={ErrorPage} />
                </Switch>
            </Router>
        )
    }
}

export default App

我的路由器商店

import { RouterStore as BaseRouterStore, syncHistoryWithStore } from 'mobx-react-router'
import { createBrowserHistory } from 'history'

export class RouterStore extends BaseRouterStore {
    constructor() {
        super()
        this.history = syncHistoryWithStore(createBrowserHistory(), this)
    }
}

我如何创建MobX商店

export const createStores = () => {
    const routerStore = new RouterStore()
    const packageListStore = new PackageListStore()
    const packageSummaryStore = new PackageSummaryStore()
    const packageUploadStore = new PackageUploadStore()

    return {
        [STORE_ROUTER]: routerStore,
        [STORE_SUPPORT_PACKAGE_LIST]: packageListStore,
        [STORE_SUPPORT_PACKAGE_SUMMARY]: packageSummaryStore,
        [STORE_SUPPORT_PACKAGE_UPLOAD]: packageUploadStore
    }
}

所以我的问题是：

1. 当用户通过浏览器后退/前进时，如何获取页面以加载正确的数据？
2. 如果解决方案能够让MobX观察位置的变化，我该怎么办？

Answer 1

如果我没记错的话，使用浏览器后退功能不会重新加载页面（我可能是错的）。

为什么不尝试检测浏览器的后退操作并在检测到时重新加载页面？

您可以尝试使用以下代码在单击浏览器后退按钮时手动重新加载页面。

$(window).bind("pageshow", function() {
  // Run reload code here.
});

另外出于好奇，为什么需要这么多不同的商店？