Nesting in Default Route

Question

I have an applications index page that lists all my applications. The index page is also the default route. I want to nest a 'applications new' modal in the index page. This way I can render the modal while on top of the index page. However, I'm not able to nest within the default route successfully.

Here's how I think it should work

<Route name='applications' path='/applications' handler={Applications}>
  <DefaultRoute name="index" handler={ApplicationIndex}>
    <Route name='applicationNew' path='/new' handler={ApplicationNewModal}/>
  </DefaultRoute>
  <Route name="applicationShow" path=':key' handler={ApplicationShow}/>
</Route>

When I try to transition to 'applicationNew' I get an error saying that no route was found with that name

Answer 1

You need to move it to its own Route inside a Route with handler={ApplicationIndex}.

<Route name='applications' path='/applications' handler={Applications}>
  <DefaultRoute name="index" handler={ApplicationIndex} />
  <Route handler={ApplicationIndex}>
    <Route name='applicationNew' path='/new' handler={ApplicationNewModal} />
  </Route>
  <Route name="applicationShow" path=':key' handler={ApplicationShow}/>
</Route>