title: Can very deeply nesting React routing be simplified by duplicating routes?
body: <p>I'm using React router v4. I'm building a basic &quot;profile&quot; feature.</p>
  <p>The main structure is the following one :
  I got a profile list table ( /catalog-view/profils )
  Inside this same page, the user can create a profile by clicking a button.</p>
  <p>So the user clicks on that button, the routing is changing for /catalog-view/profils/create.
  You ended with the table list AND the &quot;create profil&quot; component on the same page.</p>
  <p>AND inside that component, you can navigate between two URLs ( /catalog-view/profils/create which is the base one and /catalog-view/profils/create/profileId)</p>
  <pre><code>const ProfilsSection = ({ ...props }) =&gt; {
      return (
          &lt;Fragment&gt;
              &lt;ProfileCreationPanel {...props} /&gt; &lt;---- THAT ONE IS THE COMPONENT THAT LEADS TO CREATE A PROFIL
              &lt;DisponibilitiesSectionContainer /&gt;
              &lt;ProfilsTableSectionContainer /&gt;
          &lt;/Fragment&gt;
      )
  };
  
  &lt;---THAT COMPONENT IS RESPONSIBLE FOR DISPLAYING THE CONTENT COMPONENT FOR BOTH ROUTE
  const ProfileCreationPanel = () =&gt; {
      return (
          &lt;Fragment&gt;
              &lt;ProtectedRoute
                  exact
                  AUTHORIZED_ROLES={[USER_ROLES.DELIVERY]}
                  path={profileCreationPath.path.creation}
                  render={props =&gt; &lt;Content {...props} /&gt;}
              /&gt;
              &lt;ProtectedRoute
                  exact
                  AUTHORIZED_ROLES={[USER_ROLES.DELIVERY]}
                  path={profileCreationPath.path.editClients}
                  render={props =&gt; &lt;Content {...props} /&gt;}
              /&gt;
          &lt;/Fragment&gt;
      )
  };
  
  &lt;---THAT ONE IS WRAPPED IN A SWITCH TO DISPLAY THE RIGHT CONTENT ACCORDING TO THE EXACT PATH
  const ProfilesContent = ({ ...props }) =&gt; {
      return (
          &lt;Switch&gt;
              &lt;ProtectedRoute
                  exact
                  AUTHORIZED_ROLES={[USER_ROLES.DELIVERY]}
                  path={profileCreationPath.path.creation}
                  render={props =&gt; &lt;ProfileInformationsContainer {...props} /&gt;}
              /&gt;
              &lt;ProtectedRoute
                  exact
                  AUTHORIZED_ROLES={[USER_ROLES.DELIVERY]}
                  path={profileCreationPath.path.editClients}
                  render={props =&gt; &quot;second component&quot;}
              /&gt;
          &lt;/Switch&gt;
      )
  };
  
  export default ProfilesContent;
  
  </code></pre>
  <p>And finally those are my routes</p>
  <pre><code>export const profileCreationPath = {
      path: {
          creation: `${catalogRoutes.deliveryProfils.path}/creation`,
          editClients: `${catalogRoutes.deliveryProfils.path}/creation/:profileId`
      },
      buildPath: ({ isEditingClients, profileId }) =&gt;
          !isEditingClients ? profileCreationPath.path.creation
              : toProfileCreationEditingClientsPath({ profileId })
  }
  
  export const toProfileCreationEditingClientsPath = pathToRegexp.compile(profileCreationPath.path.editClients);
  
  </code></pre>
  <p>This is a working case but I feel there is a better way to do so.
  Everything looks quite messy and I wonder if Route duplication to render the same content component according to different routes is the right thing to do</p>