Изменить содержимое, если пункт меню изменит 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>

В моем домашнем компоненте у меня вот так <</p>

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>