项目学习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 (
        // 
        
            
                
                    
                        {'home '}
                        
                    
                    
                        {'welcome '}
                        
                    
                
            
            
                
Header
                
                    
{props.children}
                
                
            
        
        // 
    );
};
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 = () => (
    
        
            } />
            } />
     
   
);

export default BasicRoute;

最后一步：

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

App.tsx

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


function App() {
    return (
        

                {/*  */}
        
    );
}

export default App;

之后我思考了一个问题，为什么引入到 app 中的不是 layout 而是 router。后来我发现引入的就是 layout ，只不过这个 layout 中包含了 router ，router 被当成 props 传给了 layout ，这样就能实现局部更新了。这里 layout 和 router 的包含关系十分重要，需要注意。