react-router v4で絶対パスにリダイレクトするにはどうすればよいですか？

Question

私は巨大なDjangoウェブアプリケーションを持っています。その1つは、ノードで書かれたモジュール（ダッシュボード）です。ユーザログインはDjangoモジュールによって処理されます。

反応ダッシュボードにアクセスするには、メインアプリにログインする必要があります。これは部分的に機能します。コードはユーザーセッションをブラウザから取得し、存在する場合にのみレンダリングします。

セッションがなければメインのログインページにリダイレクトしたいと思いますが、現在の構造（とこの血まみれのv4ルーター）でどうやって行うのか分かりません。

BrowserRouterコンポーネントのベース名を使用して、djangoアプリケーションのダッシュボードパスに関連するルートを使用しています。

これは私がapp.jsxためJSXのために思い付いたものです：

<BrowserRouter basename='/en/dashboard'> 
    {this.state.isAuthenticated ? (
     <Paper zDepth={0} style={{ height: '100%', backgroundColor: grey900 }}> 
      <div style={{height: '100%'}}> 
       <Header /> 
       <Switch> 
        <Route exact={true} path='/' component={FirstSection}/> 
        <Route path='/first' component={FirstSection}/> 
        <Route path='/second' component={SecondSection}/> 
       </Switch> 
      </div> 
     </Paper> 
    ) : (
     <Redirect to="/en/login"/> 
    )} 
</BrowserRouter> 

はしかし、それは実際にen/dashboard/en/loginにリダイレクトします。私は、BrowserRouterから 'basename'プロパティを削除してそれを各後続のRouteに追加することができると信じていますが、このモジュールが最終的に大きくなると、ルーティングが困難になります。これを行うより良い方法はありますか？

Answer 1

残念ながら、これは不可能です。ベース名を使用している場合、hrefが作成される前にすべてのパスのベースに追加されます。これは次の関数を使用pushとreplace方法でcreateBrowserHistoryにhistoryモジュールで起こる：

var createHref = function createHref(location) { 
    return basename + (0, _PathUtils.createPath)(location); 
}; 

push又はreplace方法のいずれかを使用します。

あなたはRedirect.prototype.performメソッドで次のコードブロックを見つけることができます。

if (push) { 
    history.push(to); 
} else { 
    history.replace(to); 
} 

以上何をreact-router-domモジュールをインポートしてから輸出されreact-routerモジュールにRedirect.jsで見つけることができます。

あなたがしようとしていることをするにはbasenameをconstにして、各ルートのパスの先頭に追加します。

または<Redirect />にはignoreBasenameオプションがありませんが、実装可能ですが残念です。