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

Question

我有一个用 TypeScript 编写的 React 应用程序 (16.8.6)，它使用 React Router (5.0.1) 和 MobX (5.9.4)。导航工作正常，数据应该加载，但是，当我单击浏览器的“后退”按钮时，URL 发生变化但没有更新状态并且页面没有重新呈现。我已经阅读了无数关于这个问题和 withRouter 修复的文章，我试过了，但没有什么不同。

一个典型的用例是导航到摘要页面，选择导致新数据加载和新历史状态被推送的各种事物，然后返回几个步骤到您开始的地方。大多数历史推送发生在处理多个路由的摘要组件中。我注意到，当从摘要页面返回到主页时，重新呈现会按预期进行。

我的索引.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()

我的应用.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

你可以在你的组件中实现这样的东西:

import { inject, observer } from 'mobx-react';
import { observe } from 'mobx';

@inject('routerStore')
@observer
class PackageSummary extends React.Component {
  listener = null;
  componentDidMount() {
    this.listener = observe(this.props.routerStore, 'location', ({ oldValue, newValue }) => {
      if (!oldValue || oldValue.pathname !== newValue.pathname) {
        // your logic
      }
    }, true)
  }

  componentWillUnmount() {
    this.listener();
  }
}

这种方法的问题在于，如果您从 /summary 返回到其他页面(例如 '/')，回调将启动，因此您还需要一些有点检查这是哪条路线。由于这些并发症，我建议使用 mobx-state-router ，我发现它更适合与 MobX 一起使用。