項目學習2——關於antd實現局部刷新(antd)

使用 antd 中的布局時發現不知道如何做到局部更新，現在來記錄一下自己了解到的解決方法。

第一步：

　　將你使用的 layout 放在一個文件中，並且在 item 中使用 link 標簽。注意：content 中使用 props.children

　　BasicLayout.tsx

import { FC } from 'react';
import { Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import './BasicLayout.css';

const BasicLayout: FC = (props) => {
    const { Header, Footer, Sider, Content } = Layout;
    console.log(props)
    return (
        // <Router>
        <Layout>
            <Sider width={256} style={{ minHeight: '100vh', color: 'white' }}>
                <Menu theme="dark" mode="inline">
                    <Menu.Item key="1">
                        {'home '}
                        <Link to="/home" />
                    </Menu.Item>
                    <Menu.Item key="2">
                        {'welcome '}
                        <Link to="/welcome" />
                    </Menu.Item>
                </Menu>
            </Sider>
            <Layout>
                <Header style={{ background: '#fff', textAlign: 'center', padding: 0 }}>Header</Header>
                <Content style={{ margin: '24px 16px 0' }}>
                    <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>{props.children}</div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>
        </Layout>
        // </Router>
    );
};
export default BasicLayout;

第二步：

　　配置路由，將你會跳轉到的頁面引入到這里，並且引入你的 layout 用它包裹住 route

router.tsx

 import React from 'react';
import { Route, Routes } from 'react-router-dom';
//引入布局和子組件
import Layout from '../layout/BasicLayout';
import Welcome from '../view/Mywelcome';
import Home from '../view/Myhome';
// //分配路由
const BasicRoute = () => (
    <Layout>
        <Routes>
            <Route path="welcome" element={<Welcome />} />
            <Route path="home" element={<Home />} /></Routes>
     </Layout>
   
);

export default BasicRoute;

最后一步：

　　在App.tsx 中使用 router.tsx就可以了。注意：使用的是route，不是layout

App.tsx

import './App.css';
import BasicRoute from './routes/router'


function App() {
    return (
        <div className="App">
                {/* <BasicLayout /> */}
        <BasicRoute /></div>
    );
}

export default App;

 

之后我思考了一個問題，為什么引入到 app 中的不是 layout 而是 router。后來我發現引入的就是 layout ，只不過這個 layout 中包含了 router ，router 被當成 props 傳給了 layout ，這樣就能實現局部更新了。這里 layout 和 router 的包含關系十分重要，需要注意。