How to correctly decompose routes in a project?

Question

React

there is a main page, and there is a router like

<Router history={createBrowserHistory()} >
      <ScrollToTop>
        <Suspense fallback={<LoadingComponent />}>
          <Switch>
            <Route path="/" component={Wrapper} />
            <Route exact path="/services" component={Services} />
            <Route exact path="/login" component={Login} />
            <Route component={NotFound} />
          </Switch>
        </Suspense>
      </ScrollToTop>
    </Router>

Here, the main page (Wrapper) loads the components of the header, footer, side menu, and central content block.
Pages change in content. and there is a router like

<Switch>
        <Route exact path="/" component={Component1} />
       <Route exact path="/" component={Component2} />
       <Route exact path="/" component={Component3} />
</Switch>

With this layout, the route with /Login does not work. which should render without a menu header and content with a footer. How to be, tell me please.

Answer 1

<Switch>
  <Route exact path="/services" component={Services} />
  <Route exact path="/login" component={Login} />
  <Route path="/" component={Wrapper} />
</Switch>

NotFound needs to be moved to the Switch of the Wrapper component.