Отображение вложенных маршрутов с помощью response-router-dom

Question

Здравствуйте, я пытаюсь создать базовое c Реагирующее приложение с базовым c боковым меню и навигацией, содержимое отображается под моим боковым меню, а не сбоку, Вот мой код:

Приложение. js:

class App extends Component {
  componentDidMount() {
  this.props.fetchUser();
}
  render() {
     console.log('AUTH:' + this.props.auth);
     return (
     <div>
        <BrowserRouter>
          <AntdTopMenu/>
            <Route exact path="/login" component={Login} />
            <Route path="/surveys/new" component={SurveyNew} />
            <Switch>
              <Route path="/dashboard">
              <Dashboard />
            </Route>
          </Switch>
       </BrowserRouter>
    </div>
   );
 }
}
function mapStateToProps({ auth }) {
  return { auth };
}

export default connect(
   mapStateToProps,
   actions
   )(App);

Вот мой компонент с Dashboard вложенных маршрутов. js

function Dashboard() {

let { path } = useRouteMatch();
return (
    <div>
        <AntdSideMenu/>
        <Switch>
            <Route path={`${path}/users`}>
                <UsersLayout/>
            </Route>
        </Switch>
    </div>
  );
}

function mapStateToProps({ auth }) {
    return { auth };
}

export default connect(mapStateToProps)(Dashboard);

Вот компонент, который я хочу отобразить после сопоставления с URL-адресом с вложенным маршрутом, и я хочу отобразить каждый компонент для каждого элемента бокового меню UserLayout. js

const UsersLayout = ()=> {

let { path, url } = useRouteMatch();

    return (
        <div>

            <h1>Hello</h1>
            <h1>Hello</h1>
            <h1>Hello</h1>
            <h1>Hello</h1>
            <h1>Hello</h1>
            <h1>Hello</h1>
        </div>
    );
}

function mapStateToProps({ auth }) {
    return { auth };
}

export default connect(mapStateToProps)(UsersLayout);