💡 Antd + Sider + React-Router-Dom

1. Antd layout의 Sider을 복붙한다!

2. 필요 없는 내용들을 삭제하고 원하는 내용으로 수정한다. 

3. react router을 적용한다. 

 

원래는 Switch를 사용해서 Route를 적용했었고, props로 component를 넘겼었는데 아래 링크를 보면 내용이 수정된 것을 알 수 있다...

Switch는 Routes로 바뀌고 (동일하게 작동한다고 한다. )

component는 element로 바뀌었다...ㅎㅅㅎ

https://reactrouter.com/docs/en/v6/upgrading/v5

React Router | Upgrading from v5

 

계속 예전 방식을 쓰다가 왜 안되지 하고 있었는데...ㅎㅅㅎ 

바뀐 이유에 대해서는 링크를 타고 들어가서 읽어보도록 하쟈! 그들의...이유가 있으니...허허

 

...
  render() {
    const { collapsed } = this.state;
    return (
      <Router>
        <Layout style={{ minHeight: "100vh" }}>
          <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
            <div className={styles.logo} />
            <Menu theme="dark" mode="inline">
              <Menu.Item key="1">
                <Link to="/one">
                  <span>One</span>
                </Link>
              </Menu.Item>
              <Menu.Item key="2">
                <Link to="/two">
                  <span>Two</span>
                </Link>
              </Menu.Item>
              <Menu.Item key="3">
                <Link to="/three">
                  <span>Three</span>
                </Link>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout className={styles.site_layout}>
            <Header
              className={styles.site_layout_background}
              style={{ padding: 0 }}
            />
            <Content style={{ margin: "0 16px" }}>
              <Breadcrumb style={{ margin: "16px 0" }}>
                <Breadcrumb.Item>Current Menu</Breadcrumb.Item>
              </Breadcrumb>
              <div
                className={styles.site_layout_background}
                style={{ padding: 24, minHeight: 360 }}
              >
                <Routes>
                  <Route path="/one" element={<One />} />
                  <Route path="/two" element={<Two />} />
                  <Route path="/three" element={<Three />}></Route>
                </Routes>
              </div>
            </Content>
            <Footer style={{ textAlign: "center" }}>...footer...</Footer>
          </Layout>
        </Layout>
      </Router>
    );
  }
}

 

 

 ⭐ if feedback and question : comment please⭐