Components After React Suspense Not Loading?

Question

I had to break up some of my routes with suspense and react.lazy to ensure that my bundle file wasn't ridiculous. But after doing so, the routes after my first suspense bracket are no longer working?

In the following example, the routes for Links 1 - 6 are working properly (no issue and they render properly). But the components inside the Suspense and all the ones after it (inside and outside the suspense) aren't loading properly. You go to that route and nothing loads on the page. Even the Spinner component doesn't load as the fallback. I've tried removing the spinner component as the fallback and just doing Loading... and even that won't appear on the page.

My import statements:

import React, { Component } from 'react';
import { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

My component import structure example:

import Comp1 from './components/Comp1';
import Comp2 from './components/Comp2';
import Comp3 from './components/Comp3';
import Comp4 from './components/Comp4';
import Comp5 from './components/Comp5';
import Comp6 from './components/Comp6';
import Comp9 from './components/Comp9';

const Comp7 = React.lazy(() => import('./components/Comp7'));
const Comp8 = React.lazy(() => import('./components/Comp8'));
const Comp10 = React.lazy(() => import('./components/Comp10'));

(Example of my route tree)

<Route exact path="/link-1" component={ Comp1 } />
<Route exact path="/link-2" component={ Comp2 } />
<Route exact path="/link-3" component={ Comp3 } />
<Route exact path="/link-4" component={ Comp4 } />
<Route exact path="/link-5" component={ Comp5 } />
<Route exact path="/link-6" component={ Comp6 } />
<Suspense fallback={<Spinner /> }>
    <Route exact path="/link-7" component={ Comp7 } />
    <Route exact path="/link-8" component={ Comp8 } />
</Suspense>

<Route exact path="/link-9" component={ Comp9 } />

<Suspense fallback={<Spinner /> }>
    <Route exact path="/link-10" component={ Comp10 } />
</Suspense>

<Route exact path="/link-11" component={ Comp11 } />

Edit: Showcasing the way I fixed it.

<Suspense fallback={<Spinner /> }>
    <Route exact path="/link-1" component={ Comp1 } />
    <Route exact path="/link-2" component={ Comp2 } />
    <Route exact path="/link-3" component={ Comp3 } />
    <Route exact path="/link-4" component={ Comp4 } />
    <Route exact path="/link-5" component={ Comp5 } />
    <Route exact path="/link-6" component={ Comp6 } />
    <Route exact path="/link-7" component={ Comp7 } />
    <Route exact path="/link-8" component={ Comp8 } />
    <Route exact path="/link-9" component={ Comp9 } />
    <Route exact path="/link-10" component={ Comp10 } />
</Suspense>

Answer 1

It had to do with my React-Router. The documentation and sources I was reviewing for it said that the routes could be in the normal route tree, turned out that wasn't the case. Suspense had to be outside the Statement for react-router. After wrapping every route outside the switch statement, it worked properly.