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(
    // <React.StrictMode>
   <Router> <App />, </Router>,
    // </React.StrictMode>,
    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 (
        <div className="App"><BasicRoute />
        </div>
    );
}

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 = () => (
    <Layout> <Routes>
            <Route path="welcome" element={<Welcome />} />
            <Route path="home" element={<Home />} /></Routes> </Layout>
);

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 <Home />;
    //      }else{
    //         return <Welcome />;
    //      }
    // };

    return (
        <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>
    );
};
export default BasicLayout;