私有路由未匹配（404）-React Router

Question

我有一些带有私有路由的以下代码。 No Match路由根本不起作用。仅供参考，我想将TopNavbar，LeftSideNavbar和Main插座与Login和NoMatch组件分开。

react-router-dom => v5.0.1

Main.js

function Main(props) {
    return (
      <>
        <TopNavbar />

        <Container fluid>
          <div className="row">
            <LeftSideNavbar />

            <main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-4">
              {props.children}
            </main>
          </div> 
        </Container>
      </>
    );
}

export default Main;

App.js

function App() {
  return (
    <ErrorBoundary>
      <Router>
        <Switch>
          <Route exact path="/login" component={Login} />

          <Route path="/">
            <Main>
              <PrivateRoute exact path="/" component={Home} />
              <PrivateRoute path="/settings" component={Settings} />
            </Main>
          </Route>

          <Route component={NoMatch} />
        </Switch>
      </Router>
    </ErrorBoundary>
  );
}

export default App;

请帮助我寻求解决方案。预先感谢。