ネストされたナビゲーションのリアクタ・ルータのベストプラクティス？

Question

私はReactアプリケーションを構築しており、React Routerを使ってルーティングを管理しています。次のようにアプリケーションの情報アーキテクチャを表すことができるように/#/projects/1/components/1

----------------------------------------------------------- 
|   | Home > Projects > 0 > Object > 1   | 
| Home  |--------------------------------------------| 
|   |           | 
| Projects | Object 1         | 
|   |           | 
| Services | Blah blah blah       | 
|   |           | 
| Users  |           | 
|   |           | 
----------------------------------------------------------- 

としてルートいずれかのために与えられたことに注意を見たときに

- App 
    - Projects 
     - Project 1 
      - Objects 
       - Object 1 
       - Object 2 
       - etc... 
      - Collaborators 
     - ... 
    - Services 
    - Users 

アプリケーションのUIは、次のようになりますルートは、上記の情報アーキテクチャースキームに示されているように、ビューはボディーセクションにレンダリングする必要があります（上記の図では、「コンポーネント1」がレンダリングされています）。私は私のルートを定義するPlainRoutesを使用している

：

は今、私が誤ってでこれを実施しているルータに反応使ってどのように反応するかを説明します。ここでルートが定義されている方法の簡単な例である： <Router routes={routes}></Router>

が働いのこの種を行う。このように、ルータに反応成分に送り込ま取得

const routes = [ 
    { 
     path: '/', 
     component: App, 
     name: 'Home', 
     childRoutes: [ 
      // /projects 
      { 
       path: 'projects', 
       component: Projects, 
       name: 'Projects' 
      }, 
      { 
       path: 'projects/:projectid', 
       component: ProjectDetails, 
       name: 'Project Details', 
       childRoutes: [ 
        { 
         path: 'objects', 
         component: Objects, 
         name: 'Objects' 
        }, 
        { 
         path: 'objects/:objectid', 
         component: ObjectDetails, 
         name: 'Object Details' 
        }, 
        { 
         path: 'collaborators', 
         component: Collaborators, 
         name: 'Collaborators' 
        } 
       ] 
      }, 
      // /services 
      { 
       path: 'services', 
       component: Services, 
       name: 'Services' 
      }, 
      // /users 
      { 
       path: 'users', 
       component: Users, 
       name: 'Users' 
      } 
     ] 
    } 
]; 

。私はに移動しようとすると：

/#/projects

私はアプリのボディでレンダリングプロジェクトのコンポーネントを参照してくださいでしょう。私はアプリケーションの本体でレンダリングProjectDetail成分を見ること

/#/projects/1

：私に移動しようとする

。私はまだアプリのボディでレンダリングProjectDetailコンポーネントを見ることが

/#/projects/1/objects

：私はに移動しようと試みるしかし

、。 /projects/:projectidパラメータが解決されたときにルータがただ停止し、/projects/:projectid/objectsルートに割り当てられたコンポーネントを引き続きレンダリングしない理由がわかりません。

私は問題が私がReact Routerを間違った方法で使っていたと思います。子ルートは、論理的にネストされているだけではなく、親コンポーネントの内部に物理的にネストされています。少なくとも、私はそれが問題だと思う。明らかに、私はリアクタ・ルータがどのように使用されるべきかに関してちょっと混乱しています - 特にchildRoutesのコンセプト。

質問は、React Routerを使用して、上記のように私が求めている階層構造をアプリケーションに与える方法です。私は、ルータがアプリケーションの深く入れ子構造（ブレッドクラムやナビゲーションなど）を認識してもらいたいのですが、コンポーネントを物理的に入れ子にしたくはありません。ここでベストプラクティスは何ですか？

Answer 1

あなたはパス/#/projects/1/objectsでProjectDetailsとObjectsの両方を表示したくないことを考えると、あなたは巣にこれらのルートを望んでいません。

childRoutes: [ 
     // /projects 
     { 
      path: 'projects', 
      component: Projects, 
      name: 'Projects' 
     }, 
     { 
      path: 'projects/:projectid', 
      component: ProjectDetails, 
      name: 'Project Details', 
     }, 
     { 
      path: 'projects/:projectid/objects', 
      component: Objects, 
      name: 'Objects' 
     }, 
     { 
      path: 'projects/:projectid/objects/:objectid', 
      component: ObjectDetails, 
      name: 'Object Details' 
     }, 

あなたはなりますが、ProjectDetailsのthis.props.children内移入するObjectsを意図された場合にのみ、巣ルート。