This article builds on the previous page layout practice, replacing the default home page with a page with layout.

We know where the home page points to is defined in the index.tsx file. After building the environment in the last article, I created a div and added a button on the home page. Now let’s change this to point to a page with a layout.

First, we’ll start with a preliminary optimization of the code directory, creating a new SRC/View directory to hold all the custom pages. Create a new main folder under View to store the home page files. Create two new files in the main folder:

MainPage.tsx:

import './MainPage.css' import { Layout, Menu, Breadcrumb } from 'antd'; import { DesktopOutlined, PieChartOutlined, FileOutlined, TeamOutlined, UserOutlined, } from '@ant-design/icons'; const { Header, Content, Footer, Sider } = Layout; const { SubMenu } = Menu; class MainPage extends React.Component { state = { collapsed: false, }; onCollapse = (collapsed: any) => { console.log(collapsed); this.setState({ collapsed }); }; render() { const { collapsed } = this.state; return ( <Layout style={{ minHeight: '100vh' }}> <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}> <div className="logo" /> <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline"> <Menu.Item key="1" icon={<PieChartOutlined />}> Option 1 </Menu.Item> <Menu.Item key="2" icon={<DesktopOutlined />}> Option 2 </Menu.Item> <SubMenu key="sub1" icon={<UserOutlined />} title="User"> <Menu.Item key="3">Tom</Menu.Item> <Menu.Item key="4">Bill</Menu.Item> <Menu.Item key="5">Alex</Menu.Item> </SubMenu> <SubMenu key="sub2" icon={<TeamOutlined />} title="Team"> <Menu.Item key="6">Team 1</Menu.Item> <Menu.Item key="8">Team 2</Menu.Item> </SubMenu> <Menu.Item key="9" icon={<FileOutlined />}> Files </Menu.Item> </Menu> </Sider> <Layout className="site-layout"> <Header className="site-layout-background" style={{ padding: 0 }} /> <Content style={{ margin: '0 16px' }}> <Breadcrumb style={{ margin: '16px 0' }}> <Breadcrumb.Item>User</Breadcrumb.Item> <Breadcrumb.Item>Bill</Breadcrumb.Item> </Breadcrumb> <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}> Bill is a cat. </div> </Content> <Footer style={{ textAlign: 'Center'}}>Ant Design ©2018 Created by Ant UED</Footer> </Layout> </Layout>) } } export default MainPage;Copy the code

MainPage.css:

#components-layout-demo-side .logo { height: 32px; margin: 16px; Background: Rgba (255, 255, 255, 0.3); } .site-layou t .site-layout-background { background: #fff; }Copy the code

Note: the above code is copied from the official demo, if you want to choose a different page layout, you can find or modify.

Next, we modify the index.tsx file to point to the MainPage:

index.tsx import React from ‘react’; import ReactDOM from ‘react-dom’; import ‘./index.css’; // import App from ‘./App’; import MainPage from ‘./views/main/MainPage’; import reportWebVitals from ‘./reportWebVitals’;

import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import MainPage from './views/main/MainPage';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <MainPage />
  </React.StrictMode>,
  document.getElementById('root')
);
Copy the code

Local boot:

Copy the code

Visit http://localhost:3000 and a page with a layout appears:

Later we can beautify the page and develop a single page application.