マルチレベルナビゲーションを作成するために複数のルータコンポーネントを使用する必要がありますか？

Question

のは、私は、次のアプリケーションの構造を持っているとしましょう：

+--+--+ login 
    | 
    +--+ signup 
    | 
    +--+ inner main 
     | 
     +--+ settings/user 
     | 
     +--+ settings/app 
     | 
     +--+ settings/about 
     |... 

innerは、その下のすべてをラップしますが、私は/settingsに得るとき、私はルータを使用する3つのタブがあります。私は私がもしわからないので、innerWrapper -> settingsWrapper -> userSettings

がsettings、自分自身のルートコンポーネントを使用すべきでしょうsettingsは私がログインしていますので、もし、それより下のすべてのルートの別のラッパーを持っている、とwww.myapp.com/settings/userに行きたいですそのコンポーネントを1つのルーターコンポーネントのセットアップでラップする方法があります。このようなことは悪いようです：

<Route path="/settings/user" {...rest} render={props => (
    <wrapper> 
     <User {...props}/> 
    </wrapper> 
)}/> 
<Route path="/settings/app" {...rest} render={props => (
    <wrapper> 
     <App {...props}/> 
    </wrapper> 
)}/> 

Answer 1

リアクタルーターV4では、コンポーネント内にサブルートを配置します。あなたに続いて

<BrowserRouter> 
    <Route path='/settings' component={ SettingsWrapper } /> 
    // Other routes 
</BrowserRouter> 

：

だから、あなたのルーターがあるあなたのInnerWrapperコンポーネント、で、あなたはSettingsWrapperコンポーネントを描画する「/設定」ページへのルートを持つことができますSettingsWrapperコンポーネントの場合、他のコンポーネントを内部にレンダリングするサブルートを持つことができます。

<Route path='/settings/user' component={ UserSettings } /> 
<Route path='/settings/app' component={ AppSettings } /> 

私はこれが役に立ちそうです。