使用react-router-dom显示的嵌套路由

Question

您好，我正在尝试制作一个带有基本侧边菜单的基本React应用程序，导航内容显示在我的侧边菜单下方而不是侧面，这是我的代码：

App.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);