2016-02-08 29 views
7

私は、これが起こっている理由とそれをデバッグする方法について、誰かが明らかにすることができます。React RouterはonEnter関数を取得できません/

は、私は、次のルートが定義されている:私はままにしておくと

function requireAuth(nextState, transition) { 
    transition.to("/login"); 
} 

export default (withHistory, onUpdate) => { 
    const history = withHistory? 
       (Modernizr.history ? 
       new BrowserHistory 
       : new HashHistory) 
      : null; 
    return (
    <Router history={history}> 
     <Route path='/login' component={Login} /> 
     <Route path='/' component={Home} onEnter={requireAuth} /> 
    </Router> 
); 
}; 

requireAuthは、ユーザーがログインしているかどうかを確認していない場合は、ログインページにリダイレクトすることになっていますtranstion.toを呼び出してルートURLを参照します。デバッガにエラーメッセージが表示されず、「Can not Get /」というメッセージが表示されます。その行にブレークポイントを置くことは何もしないようです。

特に奇妙なのは、transition.to(...)debugger;ステートメントに置き換えると、メソッドが呼び出され、ルーティングが正常に機能するということです。

私は何かについて誤解を持っていなければなりません。

編集:私はhost:port/loginにナビゲートすることがうまく動作するので、loginのルートが動作することを知っておく必要があります。

+1

react-routerのバージョンは? 1.x? – walkerrandophsmith

+0

反応ルータのバージョン1.0.0-beta3を使用しています。私が使用していたバージョンをアップグレードしようとしましたが、簡単な方法で解決しました。 – shieldstroy

答えて

2

角度の背景から来て、ルーティングが完全にクライアント側で起こっていると誤って想定していました。クライアント側のサーバ側のルーティングの両方に反応ルータを使用することができます。

transition.to呼び出しはクライアント側でうまくいきましたが、サーバ側のルーティングがCannot GET /ページを蹴り戻したときに例外をスローしました。例外はキャッチされましたが、ログに記録されませんでした。

私たちは、クライアント上で実行している場合ステートメントが参照する場合、私はコメントを追加しました:

if(window.location) { 
    if(!loggedIn) { 
     transition.to("/login"); 
    } 
} 

これを処理するために、私は最終的にそれを把握場合、私は私の答えを更新します良い方法はおそらくあります。

0

現在のドキュメントによると、onEnterフックは、その2番目のパラメータとしてreplace関数を受け取ります。すなわち

type EnterHook = (nextState: RouterState, replace: RedirectFunction, callback?: Function) => any; 

あなたは反応ルータの別のバージョンを使用していますか?私はonEnterフックの代替バージョンのドキュメントを調べてみたところ、transitionオブジェクトが2番目のパラメータとして使用されていましたが、何も見つけられませんでした。

+0

私はreact-routerのバージョン1.0.0-beta3を使用しています。これは、Replaceオブジェクトではなく、Replace関数を渡します。私が使用していたバージョンをアップグレードしようとしましたが、簡単な方法で解決しました。 – shieldstroy

関連する問題