如果菜单项更改 Ant.design 和 Reactjs，则更改内容

Question

我使用 ant.design 布局为我的应用程序创建了一个布局，现在我想根据用户单击的菜单项更改内容

我也使用 React-router，如果我选择例如主页内容添加在页面底部

这是我的菜单

 <Menu  mode="inline">
   <Menu.Item key="1">
      <span>Home</span>
          <Link to='/'></Link>
  </Menu.Item>
 </Menu>

我在索引组件中也有

<Content style={{ margin: '0 16px' }}>

 </Content>

在我的主页组件中，我有这样的<

Content style={{ margin: '0 16px' }}>
                <p>Welcome</p>
              </Content>

那么如何以正确的布局添加主页，而不是在按钮中，谢谢

Answer 1

对于您的布局，您应该在主组件中遵循此结构，

<Layout>
      <Sider>Sider</Sider>
      <Layout>
        <Header>Header</Header>
         <Content>
           <p>Welcome</p>
         </Content>
        <Footer>Footer</Footer>
      </Layout>
    </Layout>

如果菜单项更改 Ant.design 和 Reactjs，则更改内容

Change Content if menu item change Ant.design and Reactjs

reactjs

antd