頁面未呈現，當我點擊回來反應路由器按鈕

我有了這個頂級組件的應用程序：頁面未呈現，當我點擊回來反應路由器按鈕

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

頁面未呈現，當我點擊回來反應路由器按鈕

回答

相關問題