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）返回，则该页面为空白。

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

导航到任意页面 - ＆gt;页面渲染正确
点击<Link> - ＆gt;页面渲染正确
点击后退按钮 - ＆gt;空白页
点击前进按钮 - ＆gt;空白页
点击后退按钮 - ＆gt;第1步的页面呈现!!
点击前进 - ＆gt;没有渲染更改，步骤1中的页面保持渲染
点击返回 - ＆gt;空白页面再次呈现
点击前进 - ＆gt;仍然是一个空白页
点击返回 - ＆gt;步骤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的反应。我从我的Rails应用程序中删除了Turbolinks，问题解决了。

当我点击带有react-router

1 个答案: