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包裝Layout.Sider並減少路由器中的一個Layout。