reactjs - 当我使用 react 路由器单击后退按钮时，页面未呈现

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'))
  );
});

当我点击<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当我需要手动访问商店时，类作为容器组件。每当我不需要手动访问商店时，我都会使用 connect来自react-redux 。 TopNav虽然是一个演示组件，所以至少它应该呈现，因为它不依赖于商店(至少我认为它应该)。

Answer 1

这最终是 Turbolinks 对后退按钮以及 React Router 的 react 。我从 Rails 应用程序中删除了 Turbolinks，问题已解决。