CODEWITHSUNDEEP
reactjsantd
A.khalifa
A.khalifa

Reputation: 2496

Change Content if menu item change Ant.design and Reactjs

I create a layout for my app using ant.design layout, now i want change content depand which menu item user are clicked

I use also React-router, and if i chose for exemple home content add in bottom of page

This is my menu

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

i have also in index component 

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

 </Content>

In my home component i have like this <

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

So how to add home in correct layout not in buttom and thanks

Upvotes: 0

Views: 1227

Answers (1)

Rohith Murali
Rohith Murali

Reputation: 5669

For your layout, you should be following this structure in your main component,

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

Upvotes: 1

Related Questions