antd react得到不同的显示

Question

拥有antd react，请考虑两个选项来呈现Sider部分。

选项1： 创建CustomSider：

import React from 'react';
import styles from './CustomSider.css';
import { Layout, Menu } from 'antd'
import { Link } from 'dva/router'

const CustomSider = () => {
  return (
    <Layout.Sider>
      <Menu mode="inline" theme="dark">
        <Menu.SubMenu title="Menu">
          <Menu.Item>Submenu</Menu.Item>
        </Menu.SubMenu>
      </Menu>
    </Layout.Sider>
  );
}

export default CustomSider;

并将CustomSider用作：

<BrowserRouter>
  <Layout>
    <Layout>
      <CustomSider/>
    </Layout>
  </Layout>
<Content>
  about
</Content>
</BrowserRouter>

在这种情况下，页面呈现如下：

选项2： 直接渲染Sider

<BrowserRouter>
  <Layout>
    <Layout>
      <Layout.Sider>
        <Menu mode="inline" theme="dark">
          <Menu.SubMenu title="Menu">
            <Menu.Item>Submenu</Menu.Item>
          </Menu.SubMenu>
        </Menu>
      </Layout.Sider>
    </Layout>
  </Layout>
<Content>
  about
</Content>
</BrowserRouter>

然后输出是：

我知道选项2按预期呈现页面。但究竟是什么导致了差异？如果我坚持使用选项1 ，我该如何将网页呈现为选项2 。

Answer 1

您可以尝试用Layout.Sider包装Layout并减少路由器中的一个布局。