リアクタルータ4 - パスがないレイアウトルートを定義する

Question

パスレスレイアウトルート（リアクションルータ3で可能だった）を定義しようとするときに直面しています。 は、基本的に何イムが達成しようとするようなものです：私のindex.jsで ：彼らは単に私がそれらをしたい、レイアウトするなので、私のアプリケーションコンポーネントで

<Router history={history}> 
     <Route path="/" component={App}/> 
    </Router> 

今レイアウト

<Switch> 
    <Route path="" component={AuthLayout}/> 
    <Route path="" component={MainLayout}/> 
</Switch> 

を定義しますAuthLayoutでいくつかの機能を実行し、そのネストされたルートを定義、例えば

：

<Switch> 
    <Route exact path={`${match.path}/sign-up`} component={SignUpContainer}/> 
    <Route exact path={`${match.path}/login`} component={LoginContainer}/> 
           <Route component={SignUpContainer}/> 
</Switch> 

とMainLayoutで：

<Switch> 
     <Route exact path={`${match.path}/explorer`} component={ExplorerContainer}/> 
//more routes 
     <Route component={NotFoundContainer}/> 
    </Switch> 

は今、私はスイッチが常に最初の項目にヒットするので、それは文句を言わない動作することを知っており、スイッチなしで、それは両方のコンポーネントをレンダリングします。 私が達成したいのは、浅いURLなので、レイアウトのルートを定義したくありません。

<Route path="/" component={App}> 
      <IndexRedirect to="login"/> 
      /*Profile Management Flows*/ 
      <Route path="" component={AuthLayout}> 
       <Route path="login" component={LoginContainer}/> 
       <Route path="sign-up" component={SignUpContainer}/> 
       <Route path="forgot-password" component={ForgotPasswordContainer}/> 
       <Route path="reset-password" component={ResetPasswordContainer}/> 
       <Route path="on-boarding" component={OnBoardingContainer}/> 


      </Route> 

何かアドバイス：それはRRTR 3で可能であったが、私は3でちょうど参考のためにRRTR 4に

を行うことができます場合、私はちょうど把握カント私はこのようにそれをやりましたか？私はあきらめて各レイアウトにパスを追加する必要がありますか？私はたぶんRRTR3に固執すべきですか？

Answer 1

私は似た何かが、以下で実現することができると思いルータ3に反応うん、あなたがしていた正確に何をすることができなくなります。

<Switch> 
    <Route path="/(login|signup|forgot-password|reset-password)" render={({ location }) => (
    <AuthLayout> 
     <Switch> 
      <Route path="/login" component={/* ... */} /> 
      <Route path="/signup" component={/* ... */} /> 
      {/* ... */} 
     </Switch> 
    </AuthLayout> 
)} /> 
    <Route path="/" component={MainLayout} /> 
</Switch> 

Answer 2

は、私は、単一のスイッチにすべてのあなたのルートを置くことをお勧めします各コンテナ内で使用するレイアウトを指定します。維持しやすくなります。

<Switch> 
    <Route path="/sign-up" component={SignUpContainer}/> 
    <Route path="/login" component={LoginContainer}/> 
    <Route path="/explorer" component={ExplorerContainer}/> 
    <Route path="/" component={MainLayout} /> 
</Switch> 

あなたは高次コンポーネントを使用することができる権限のないユーザーからのルートを保護したい場合。

React router v4 - Authorized routes and componentsは、私は非常に役立つルータ4を反応させるのには、次の資料が見つかりました：：私はこれがここで達成することができる方法を説明しhttps://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf