项目学习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 的包含关系十分重要，需要注意。