react问题录5——react实现局部刷新（antd）

问题起因：学习antdUI组件库时，发现 layout 的组件例子中，点击左侧菜单栏没有实现 content 部分的跳转。

解决方法：

1.入口文件　src/index.tsx　使用 BrowserRouter 将 APP 包裹

// import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
    // 
    
        ,
    ,
    // ,
    document.getElementById('root')
);
reportWebVitals();

2. App配置 src/App.tsx  在 App 内插入 BasicRoute （BasicRoute 已经被Layout包装好了。）

import './App.css';
import BasicLayout from './layout/BasicLayout';
import BasicRoute from './routes/router'
function App() {
    return (
        

        
    );
}

export default App;

3. 路由配置 src/routes/router 

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;

4.布局配置 src/layout/BacialLayout 在这个文件里 引用的 antd layout和menu

import React, { Children, FC } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import Home from '../view/Myhome';
import Welcome from '../view/Mywelcome'
import './BasicLayout.css';
import BasicRoute  from '../routes/router'

const BasicLayout: FC = (props) => {
    const { Header, Footer, Sider, Content } = Layout;
    console.log(props)
    // console.log('eee');
    //     let search = useLocation();
    //     console.log(search);
    //     console.log('sss');
    // const change = () => {
    //      if(search.pathname == '/home'){
    //         return ;
    //      }else{
    //         return ;
    //      }
    // };

    return (
        
            
                
                    
                        {'home '}
                        
                    
                    
                        {'welcome '}
                        
                    
                
            
            
                
Header
                
                    
{props.children}
                
                
            
        
    );
};
export default BasicLayout;