React lazy loaded route makes redirecting non-matching routes to /404 not work

Question

I've been trying to make a 404 not found page and redirect all non-matched routes there, currently configured with whole context as:

<Switch>
  <Route path="/faq" component={FAQ}></Route>

  <Route path="/404">
    <NotFound />
  </Route>

  <Suspense fallback={<div>Loading ...</div>}>
    <Route path="/admin" component={AdminModule}></Route>
  </Suspense>

  <Redirect exact={true} from="*" to="/404" />
</Switch>

If I move the redirect component above the suspense with the lazy loaded component, I'll no longer be able to activate routes for admin module.
If I move everything after the Suspense including the /404, It no longer loads the NotFound component for the /404 route even when navigating to it manually.

Tried various other solutions that I've found in the docs but none of them seem to work, is this by design or a bug? if it's by design, what is the design? It seems like a use case that every single app out there would need.

Sadly no, as for many other reasons we stopped using React for that particular project — SebastianG, Oct 24 '20 at 13:55

score 6 · Answer 1 · answered Jan 08 '21 at 09:44

You should not usw Suspense inside Switch. Your Switch must be wrapped by Suspense component.

<Suspense fallback={<div>Loading ...</div>}>
    <Switch>
     <Route path="/faq" component={FAQ}></Route>

     <Route path="/404">
         <NotFound />
     </Route>

     <Route path="/admin" component={AdminModule}></Route>

     <Redirect exact={true} from="*" to="/404" />
  </Switch>
</Suspense>

React lazy loaded route makes redirecting non-matching routes to /404 not work

1 Answers1