Recommended approach to iterating on the UI layout without causing URLs to change excessively?

[bensmithett]

(cut/pasted from #3319 to avoid sidetracking that issue)

Is there a good story around iterating on a layout without needing to change URLs excessively, when the router is configured with relative paths?

If configured exclusively with absolute paths, you can move components around, change nesting, etc without changing any URLs. That's not the case when the URL is derived from the way components are nested (which will happen in #3319):

// Designer: I want the sidebar visible on the change password screen
// URL: /inbox/change-password

<Route path="/" component={App}>
  <Route path="inbox" component={Inbox}>
    <Route path="change-password" component={ChangePassword} />
    <Route path="message/:id" component={Message} />
  </Route>
</Route>

// Designer: No wait, it should appear without the sidebar
// URL: /change-password

<Route path="/" component={App}>
  <Route path="inbox" component={Inbox}>
    <Route path="message/:id" component={Message} />
  </Route>
  <Route path="change-password" component={ChangePassword} />
</Route>

// Designer: No wait, bring the sidebar back, but our product is growing
// so we need new additional settings screens & let's split them over tabs
// URL: /inbox/settings/change-password

<Route path="/" component={App}>
  <Route path="inbox" component={Inbox}>
    <Route path="settings" component={SettingsTabLayout}>
      <Route path="change-password" component={ChangePassword} />
      <Route path="avatar" component={Avatar} />
      <Route path="billing" component={Billing} />
    </Route>
    <Route path="message/:id" component={Message} />
  </Route>  
</Route>

Maybe <Redirect> could handle this, but could get a bit gnarly on a larger app with a year's worth of design iterations.

[ryanflorence]

<Route path="/" component={App}>
  <Route path="inbox" component={Inbox}>
    <Route path="change-password" component={ChangePassword} />
    <Route path="message/:id" component={Message} />
  </Route>
</Route>

// designer changes mind

<Route path="/" component={App}>
  <Route path="inbox" component={Inbox}>
    <Route path="message/:id" component={Message} />
  </Route>
  {/* keep the `inbox` part of the url so it doesn't change. */}
  <Route path="inbox/change-password" component={ChangePassword} />
</Route>

//
<Route path="/" component={App}>
  <Route path="inbox" component={Inbox}>
    <Route path="settings" component={SettingsTabLayout}>
      {/* this is what we were talking about in the other issue, you can do this today to keep it the same */}
      <Route path="/inbox/change-password" component={ChangePassword} />
      <Route path="avatar" component={Avatar} />
      <Route path="billing" component={Billing} />
    </Route>
    <Route path="message/:id" component={Message} />
  </Route>  
</Route>

hope that helps!

[bensmithett]

@ryanflorence neat, thanks!