当我使用 react-router 单击后退按钮时页面未呈现

Question

我有一个具有此顶级组件的应用程序：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore } from '../lib/Store.js';

import Application from '../components/application';

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Provider store={createStore()}>
      <Router>
        <Application />
      </Router>
    </Provider>,
    document.body.appendChild(document.createElement('div'))
  );
});

当我单击 a 时<Link>，页面会正确呈现，但如果我使用浏览器返回（MacOS 上为 Chrome 60.0.3112.113），则页面为空白。

有一个非常奇怪但可重复的场景：

• 导航到任何页面 -> 页面正确呈现
• 单击<Link>-> 页面正确呈现
• 单击后退按钮 -> 空白页
• 单击前进按钮 -> 空白页
• 单击后退按钮 -> 步骤 1 中的页面呈现！！
• 单击前进 -> 无渲染更改，第 1 步中的页面保持渲染状态
• 点击返回 -> 空白页面再次渲染
• 单击前进 -> 仍然是空白页
• 单击返回 -> 步骤 1 中的页面再次呈现...

似乎每隔一次我点击它时，后退按钮就会起作用。问题是，<Link>当我让原始页面呈现每一次其他回点击时，原始页面不再有效。它带我到正确的网址，但页面是空白的。

我确定这与生命周期回调或类似的东西有关，但我无法弄清楚如何在正确的位置强制更新以解决这种情况。

为清楚起见，这是该Application组件的组成：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import PropTypes from 'prop-types';

import TopNav from './TopNav';
import BoardsDashboard from './BoardsDashboard';
import BoardContainer from './BoardContainer';
import CardContainer from './CardContainer';

import { fetchBoards } from '../actions/BoardActions';

class Application extends React.Component {
  static contextTypes = {
    store: PropTypes.object
  }

  render() {
    return (
      <div>
        <TopNav />

        <Route path='/cards/:cardId' exact component={BoardContainer} />
        <Route path='/cards/:cardId' exact component={CardContainer} />
        <Route path='/boards/:boardId' exact component={BoardContainer} />

        <Route path='/' exact component={BoardsDashboard} />
      </div>
    );
  }
}

export default Application;

使用 redux-devtools，每次单击后退和前进按钮时，我都可以看到所有正确的操作被分派。我认为我的组件没有更新，因为当这些操作完成时商店没有变化，但我需要它们即使没有变化也能呈现。

React.Component当我需要手动访问商店时，我确实有一些类作为容器组件。每当我不需要手动访问商店时，我都会使用connectfrom react-redux。 TopNav是一个展示组件，所以至少它应该呈现，因为它不依赖于商店（至少我认为它应该）。

Answer 1

这最终导致 Turbolinks 对后退按钮以及 React Router 做出反应。我从 Rails 应用程序中删除了 Turbolinks，问题解决了。