页面未呈现，当我点击回来反应路由器按钮

我有了这个顶级组件的应用程序：页面未呈现，当我点击回来反应路由器按钮

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;

使用终极版-devtools我可以看到所有的正确的行动被我每次单击后退和前进按钮时调度。我认为我的组件没有更新，因为这些操作完成时没有更改存储区，但是即使没有更改，我也需要它们进行渲染。

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

来源

2017-09-25 Brandon

这最终成为Turbolinks对后退按钮以及React Router的反应。我从Rails应用程序中删除了Turbolinks，问题得到解决。

来源

2017-10-10 18:35:17 Brandon

页面未呈现，当我点击回来反应路由器按钮

回答

相关问题