React没有在Ant.Design Layout内容上渲染组件

Question

我是React的新手，我正在为我的应用程序使用Ant.design UI框架。我在使用Layout.sider进行导航时遇到一些问题。每当我单击菜单项时，它确实会更改URL，但该组件不会呈现。

这是我的代码

Home.jsx

  const { Header, Sider } = Layout;
  return (
    <>
      <Header className="inheritBg margin-bottom">
        <Topbar currentURL={currentURL} />
      </Header>
      <Layout className="inheritBg">
        <Router>
          <Sider>
            <Sidebar/> // This is my sidebar that i have created, see below for the code
          </Sider>
          <Content /> // This is my content that i created by myself, see below for the code
        </Router>
      </Layout>
    </>
  );
}

Content.jsx

      <Layout.Content>
        <Router>
          <Switch>
            <Route path="/dashboard" component={DesignDocumentations} />
          </Switch>
        </Router>
      </Layout.Content>

Sidebar.jsx

  render() {
    return (
      <>
        <Menu
          theme="dark"
          mode="inline"
          onOpenChange={this.onOpenChange}
          openKeys={this.state.openKeys}
        >
          {dummy.map(m => {
            return (
              <SubMenu
                key={m.id}
                onTitleClick={this.props.openSubmenu.bind(null, m.name)}
                title={<span>{m.name}</span>}
              >
                {m.submodule.map(e => {
                  return (
                    <Menu.Item
                      key={e.id}
                      onClick={this.props.openItem.bind(null, this)}
                    >
                      <NavLink to="/dashboard">
                        <span>{e.module}</span>
                      </NavLink>
                    </Menu.Item>
                  );
                })}
              </SubMenu>
            );
          })}
        </Menu>
      </>
    );
  }
}

Index.js

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route path="/" exact component={Login} />
            <Switch>
                <Route exact path="/home" component={Home} />
            </Switch>
        </Switch>
    </BrowserRouter>,
    document.getElementById('root')
);

所有代码仍然是硬编码的，并且由于我是新来的反应者，因此仍然想知道单击菜单项时可以更改内容的方式。任何人都可以帮助我我的代码有什么问题吗？对此我非常感谢，谢谢