反応ルータを使用してプログラムでリダイレクトできない4

Question

この件に関する多くのドキュメントとSOFに関する質問を読んでいますが、私はこれを行うために多くの方法を使用しましたが、私は何か重要なことを逃していると思います。私が使ったすべてのナビゲーション方法について、詳細で関連性の高いコードを提供するのは難しいです。私はそれを試してみましょう。

ここではいくつかのイントロダクションについて説明します。私は反応を還元するアプリを持っていた、私はサーバーから状態を取得し、この状態に応じてページにリダイレクトする必要があります。

私のAppクラスの簡易版方法レンダリング：index.jsファイル内BrowserRouterでラップ

render() { 
    console.log("App.render"); 
    console.log(this.state); 
    return (

     <div id='game-container' width="1126" height="634"> 
     <Router> 
     <div> 
      <Route exact path="/" component={Page1}/> 
      <Route path="/bets" component={Page2}/> 
      <Route path="/games" component={Page3}/> 
      <Route path="/newpage" component={Page4}/> 
      <Route path="/info" component={ Info }/> 
     </div> 
     </Router> 
     <Overlay/> 
     </div> 
    ); 
    } 
} 

アプリケーションコンポーネント

ReactDOM.render(
    <Provider store={myStore}> 
    <BrowserRouter> 
     <App assets={ assets } locale={ qs['locale']} token={ qs['token']} sounds={ sounds } /> 
    </BrowserRouter> 
    </Provider> 
    , document.querySelector('.game-wrapper')); 

を方法1

withRouterそれは実現のだについてこのコードを追加しました：

01私はセッション情報を取得していたときに

とは、私が試してみてください。ブラウザで

this.props.history.push("/newpage"); 

URLが変更されているが、視覚的なページがしません。コンテキストルータと

方法2は、このために

はちょうど

App.contextTypes = { 
    router: React.PropTypes.object 
}; 

を追加し、私はセッション情報を取得していたとき、私は試してみてください最初と同じように

this.context.router.history.push("/newpage"); 

同じ結果をメソッド（URLは変更されますが、ページはありません）。 （ここではProgrammatically navigate using react router V4た）

方法3リダイレクト

だから私のrenderメソッドは次のようになります。

render() { 
    console.log("App.render"); 
    console.log(this.state); 
    return (

     <div id='game-container' width="1126" height="634"> 
     <Router> 
     <div> 
     <Redirect to={{ pathname: this.state.redirectTo }}/> 
      <Route exact path="/" component={Page1}/> 
      <Route path="/bets" component={Page2}/> 
      <Route path="/games" component={Page3}/> 
      <Route path="/newpage" component={Page4}/> 
      <Route path="/info" component={ Info }/> 
     </div> 
     </Router> 
     <Overlay/> 
     </div> 
    ); 
    } 
} 

そして、私はページを変更したいとき、私は新しい状態を設定します。

this.setState({ redirectTo: "/newpage" }); 

この方法では、奇妙な結果が得られます。コンストラクタで初期状態を設定すると、どのページにもリダイレクトされます。しかし、このメソッドをコード内のどこにでも使用すると、新しい状態で呼び出されるレンダリングメソッドがデバッグで参照されますが、リダイレクトは起こりません！

Answer 1

v4では、メソッド3が正しい方法（Redirectコンポーネントを使用）である必要があります。あなたが持っている問題は、Redirectが最初にマウントされたときにのみ効力を発揮しますが、ルータの最上位レベルにRedirectを置き、一度だけマウントされるためです。

ですから、<Redirect to={{ pathname: this.state.redirectTo }}/>をレンダリングする場合には、それがレンダリングされています非常に最初の時間をリダイレクトしますが、あなたが使用して状態を更新した場合には、リダイレクトされません。

this.setState({ redirectTo: "/newpage" }); 

とき、それはあなただけのために働いていた理由ですコンストラクタ内にredirectToを設定しますが、その後はリダイレクトしませんでした。

代わりに、リダイレクトをトリガーするすべてのコンポーネント/ルートでRedirectを使用する必要がありますが、典型的ではなくカスタムルートコンポーネントを作成するだけでRouteコンポーネントを使用し、カスタムコンポーネントですべてのリダイレクトロジックを1回処理します。あなたがPrivateRouteとPublicRouteはユーザーがログインしているかどうかを確認し、それに応じてリダイレクトする代わりに、通常のRouteのに使用され、ここで例を見つけることができます

： https://github.com/tylermcginnis/react-router-firebase-auth/blob/master/src/components/index.js

はここPrivateRouteのみがアクセス可能であるべき方法ですログインしたユーザーは次のようになります。

function PrivateRoute ({component: Component, authed, ...rest}) { 
    return (
    <Route 
     {...rest} 
     render={(props) => authed === true 
     ? <Component {...props} /> 
     : <Redirect to={{pathname: '/login', state: {from: props.location}}} />} 
    /> 
) 
}