如何修復使用redux時反應路由器的空白屏幕

使用本地主機時，這是正常現象。但是當我使用「npm run build」並將源代碼上傳到服務器時，我的頁面就是沒有任何錯誤的黑屏，警告。這是我的代碼。謝謝你的幫助。如何修復使用redux時反應路由器的空白屏幕

'use strict'; 
import React from 'react'; 
import { render } from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore , applyMiddleware } from 'redux'; 

import dataService from './box-message/api'; 

import switchsApp from './box-message/reducers'; 
import App from './box-message/components'; 

import {Router, Route, browserHistory} from 'react-router'; 
import MyProfile from './profile'; 

import '../index.html'; 
import '../libs/js/socketcluster.min.js'; 
import '../libs/css/styles.min.css'; 

window.store = createStore(switchsApp , applyMiddleware(dataService)); 

window.store.dispatch({type: 'GET_MESSAGE_DATA'}); 

render(
    <Provider store={window.store} > 
     <Router history={browserHistory}> 
      <Route path="/" component={App} /> 
      <Route path="/question" component={MyProfile} /> 
     </Router> 
    </Provider> 
    ,document.getElementById('root') 
)

來源

2017-02-18 Thuc Hồ

爲什麼在第1行你有''使用技巧';'？也許你打算[''使用strict';']（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Strict_mode）來代替？ –

有一個很好的機會來解決這個問題，你需要分享更多關於部署過程。例如，你用什麼來構建應用程序？一些語法會建議使用babel進行現代構建過程。「服務器生活」的計算機是否與開發環境類似？瀏覽器在空白頁上提供的日誌是什麼？ –

對不起。這是我對詞彙的錯誤。我會修復它 –

我找到了用反應路由器運行子文件夾的方式。

import {Router, Route, browserHistory , hashHistory, IndexRoute , useRouterHistory } from 'react-router'; 
import { createHistory } from 'history' 

const appHistory = useRouterHistory(createHistory)({ 
    basename: "/demos/v1" 
}); 
render(
    <Provider store={window.store}> 
     <Router history={appHistory}> 
      <Route path="/" component={App}> 
       <IndexRoute component={BoxMessage} /> 
       <Route path="/profile" component={MyProfile} > 
        <Route path="/profile/:id" component={MyProfile}/> 
        <Route path="/profile/:id/:fisrt_name" component={MyProfile}/> 
        <Route path="/profile/:id/:fisrt_name/:last_name" component={MyProfile}/> 
        <Route path="/profile/:id/:fisrt_name/:last_name/:avatar" component={MyProfile}/> 
       </Route> 
      </Route> 
     </Router> 
    </Provider> 
    , 
    document.getElementById('root') 
)

來源

2017-02-23 04:37:59

嘗試

<IndexRoute component={App}/>

來源

2017-02-18 08:32:10

感謝有關的幫助。它起作用 –

我編輯了我的路由器的東西。我使用「browserHistory」漂亮的網址。 它在localhost上工作得很好。我可以輕鬆地在索引和簡檔頁面之間交換路由器。但是當我上傳服務器時（我的域名是https），我又遇到了「空白屏幕」問題。所以我與他們混淆了。我需要幫助。謝謝大家！

。 P/s：我使用react-router：v3.0.2

import {Router, Route, browserHistory , hashHistory, IndexRoute} from 'react-router'; 

class App extends React.Component{ 

    constructor(props) { 

     super(props); 
    } 

    render() { 
     return (
      <section> 
       {this.props.children} 
      </section> 
     ) 
    } 
} 

render(
    <Provider store={window.store}> 
     <Router history={browserHistory}> 
      <Route path="/" component={App}> 
       <IndexRoute component={BoxMessage} /> 
       <Route path="/profile" component={MyProfile} /> 
      </Route> 
     </Router> 
    </Provider> 
    , 
    document.getElementById('root') 
)

來源

2017-02-20 09:10:05

您是否嘗試刪除緩存？因爲你說你上傳到遠程主機，這可能是一個可能的問題。 –

我刪除了瀏覽器的緩存，但它是一樣的。我會嘗試搜索更多。謝謝你，ThànhChungBùi太多關於你的想法。 –

我看到了問題。如果我使用「domain.net」=>運行域，它就可以工作。但是，如果我運行「domain.net/demos/」=>它不會工作。我會用子文件夾運行搜索 –

如何修復使用redux時反應路由器的空白屏幕

回答

相關問題