Not Found match does not working with Nesting Route

[iamyoki]

Fallback not found route is a little bit confused with nest.

Example

<Switch>
  <Route path="/" nest>
    <AppPage>
      <Route path="/posts"><PostsView /></Route>
      <Route path="/posts/:postId"><PostDetailView /></Route>
    </AppPage>
  </Route>

  <Route path="/auth">
    <AuthPage />
  </Route>

  <Route>
    <NotFound />
  </Route>
</Switch>

• '/' represents app page, <AppPage/> wraps nested views.
• '/auth' represents unauthorized page, <AuthPage/> contains login form.
• The last route fallback to a not found page (globally)

Unexpected

• '/some-path-not-exist' didn't reach the not found page route
• The nest '/' route caught every non-existing paths instead, even the path is not existing inside nesting.

Expected

• Whether nest prop true of false, should maintain the same expectations
• '/some-path-not-exist' path should match the fallback route - <NotFound /> if it's not being strictly matched inside nesting routes.

Suggestions

For example

<Switch>
  <Route path="/" nest>
    <Route path="settings" nest>

      <SettingsView>
        <Switch>

          <Route path="appearance">
            <AppearanceView />
          </Route>

          <Route>Not found - You may checkout /settings/appearance</Route>

        </Switch>
      </SettingsView>

    </Route>
  </Route>

  <Route>
    <NotFound />
  </Route>
</Switch>;

Would be better:

• Match inside not found if '/settings/some-path-not-exist'
• Match outside not found if '/some-path-not-exist'
• '/settings/language' fallbacks to inside not found (<Route>Not found - You may checkout /settings/appearance</Route>)
• '/set' fallbacks to outside

[fochlac]

This feels more like an issue with your application structure and not so much with this lib.

Each nested Route is like a catch all, so if you want a not-found you need to place it inside your nested route with a separate switch. What you want is multi-level matching. React Router implemented something like this, but it comes at the drawback that all routes need to be defined beforehand.

wouter has a more simplistic approach. Switch evaluates each child with a path-prop, and renderes the first match. In this case your main route. If you restructure your examples like this they would work as you expect:

<Switch>
  <Route path="/auth">
    <AuthPage />
  </Route>

  <Route path="/posts" nest>
    <AppPage>
      <Route path="/"><PostsView /></Route>
      <Route path="/:postId"><PostDetailView /></Route>
    </AppPage>
  </Route>


  <Route>
    <NotFound />
  </Route>
</Switch>

<Switch>
    <Route path="/settings" nest>

      <SettingsView>
        <Switch>

          <Route path="/appearance">
            <AppearanceView />
          </Route>

          <Route>Not found - You may checkout /settings/appearance</Route>

        </Switch>
      </SettingsView>

    </Route>

  <Route>
    <NotFound />
  </Route>
</Switch>