2017-04-05 31 views
1

私はこの問題を解こうと努力しましたが、何ができるか分かりません。私はすべてをテストしました。React Router browserHistory.push( '/')はドッキングサーバーでは動作しません。ローカルで動作します

私はReactJSプロジェクトのセットアップをローカルに持っています。私はログインページを持っています。それからページにリダイレクトされ、それらを表示するにはログインする必要があります。これはすべて完全にローカルで動作します。自分の環境とまったく同じように設定するステージングサーバーにプッシュすると、ドッカー環境になります。この1つの機能が壊れます。ログインするとURLが "/"に変わらず、単に " /ログイン"。フッターとヘッダーの両方が表示されます(ログインしたときに表示されるように設定されているだけです)。なぜこれが起こっているのかわかりません。

メニューリンクをクリックして任意のページに移動できますが、自動リダイレクトが機能していないようです。私は両方を試してみました

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { 
    Alert, 
} from 'react-bootstrap'; 
import { browserHistory } from 'react-router'; 
import { login } from '../../Actions/login'; 

class LoginForm extends Component { 
    static propTypes = { 
     login: PropTypes.func.isRequired, 
     loggedIn: PropTypes.bool.isRequired, 
     loggingIn: PropTypes.bool.isRequired, 
     error: PropTypes.bool, 
    } 

    static contextTypes = { 
     router: PropTypes.object, 
    }; 

    constructor(props) { 
     super(props); 
     this.state = { 
      email: null, 
      password: null, 
      invalidEmail: false, 
      invalidPassword: false, 
     }; 
    } 

    componentWillReceiveProps(nextProps) { 
     if (nextProps.loggedIn) { 
      this.context.router.push('/'); 
      //browserHistory.push('/'); 
     } 
    } 
} 

コード(削除関係のないコード)this.context.router.push('/');browserHistory.push('/');、ローカルの両方の仕事が、サーバー上のどちらの仕事。

答えて

0

お試しthis.context.router.history.push('/') 私は同じ問題を抱えていましたが、これで解決しました。私はそれに関する文書を見つけることはできません。

+0

this.context.router.historyは定義されていません –

+0

'this.context.router.push( '/');'または 'browserHistory.push( '/');'を使用してエラーが発生しますか? ? –

+0

これらはどちらもローカルで正常に動作しますが、サーバー上では正常に動作しません。なぜ同じ環境でなければならないのかはわかりません。 –

0

webpack2(babel v6)、react-router v4、react-router-redux v5alpha、history v4など現在のスタックで同じことが起こりました。

本番バンドルにはいくつかの違いがありました。 ルーティングはwebpack-dev-server(historyApiFallbackを含む)のdev envで完全に動作しますが、ドッカーコンテナ内のnginxが提供するプロダクションバンドルはurlを変更してそこで停止します。しかし、@ @ルータ変更アクションはディスパッチされます。

私たちの問題を解決したのは、アプリケーションの周りのHOCラッパーwithRouterの使用でした。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

我々は問題が

import { AppContainer } from 'react-hot-loader' 

if (module.hot) { 
    module.hot.accept('./App',() => { 
     const NextApp = require('./App').default 
     ReactDOM.render(wrapedApp(NextApp, store), rootEl) 
    }) 
} 

は関わらずに再レンダリング原因のdevのENVで検出されなかっ行ったとします。

関連する問題