问题描述：

使用新的Menu组件写法，没有单独的item项可添加Link标签，在Menu上添加onClick事件，使用window.location.href会直接让整个页面刷新，而不是只刷新NewList列表组件（NewList组件每次执行componentDidMount生命周期函数，而UNSAFE_componentWillReceiveProps函数不执行），请老师帮忙看一下，感谢！！！

相关代码：

import React, { Component, Fragment } from "react";
import { Link } from "react-router-dom";
import { Menu } from "antd";
import { UsergroupDeleteOutlined,IdcardOutlined,DingdingOutlined,GoogleOutlined,WechatOutlined,DribbbleOutlined} from '@ant-design/icons';
import axios from "axios";
import logo from './logo.png';
import './style.css';


class AppHeader extends Component {

    constructor(props){
        super(props);
        // this.handleClick=this.handleClick.bind(this);
        this.state={
            list:[]
        }
    }

    handleClick(e){
        window.location.href=`/${e.key}`;
    }

    render() {
        return (
            <Fragment>
                <img src={logo} className="app-header-logo"></img>
                <Menu 
                    onClick={this.handleClick}
                    items={this.state.list} 
                    mode="horizontal"
                    className="app-header-menu"
                ></Menu>
            </Fragment>
        )
    }

    componentDidMount(){
        axios.get("https://www.fastmock.site/mock/2d0bfbad91781ac90165c031f3ee88d0/news/api/indexHeader")
            .then(res=>{
                const resData=res.data.data;
                for(const item of resData){
                    if(item.icon==='<UsergroupDeleteOutlined />'){
                        item.icon=<UsergroupDeleteOutlined />;
                    }else if(item.icon==='<IdcardOutlined />'){
                        item.icon=<IdcardOutlined />;
                    }else if(item.icon==='<DingdingOutlined />'){
                        item.icon=<DingdingOutlined />;
                    }else if(item.icon==='<GoogleOutlined />'){
                        item.icon=<GoogleOutlined />;
                    }else if(item.icon==='<WechatOutlined />'){
                        item.icon=<WechatOutlined />;
                    }else if(item.icon==='<DribbbleOutlined />'){
                        item.icon=<DribbbleOutlined />;
                    }
                }
                this.setState({
                    list:resData
                });
            })
            .catch(err=>{
                console.log(err);
            });
    }
}

export default AppHeader;

相关代码：

import React, { Component } from 'react';相关代码：
import ReactDOM from 'react-dom/client';
import { Layout } from 'antd';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import AppHeader from './components/Header';
import AppList from './containers/List';
import AppDetail from './containers/Detail';
import 'antd/dist/antd.css';
import './style.css';

const { Header, Footer, Sider, Content } = Layout;

class App extends Component {

    render() {
        return (
            <BrowserRouter>
                <Layout style={{
                    minWidth: 1200,
                    height: '100%'
                }}>
                    <Header className="header">
                        <AppHeader></AppHeader>
                    </Header>
                    <Content className="content">
                        <Switch>
                            <Route path="/detail" component={AppDetail}></Route>
                            <Route path="/:id?" component={AppList}></Route>
                        </Switch>
                    </Content>
                    <Footer className="footer">@copy Jia-Jia 2022</Footer>
                </Layout>
            </BrowserRouter>
        )
    }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App></App>
);

相关代码：

import React,{Component} from "react";
import { List } from 'antd';
import axios from "axios";

class AppList extends Component {

    constructor(props){
        super(props);
        this.state={
            listData:[]
        };
    }

    UNSAFE_componentWillReceiveProps(){
        //不执行
        console.log('test');
    }
    componentDidMount(){
        //每次执行
        const id=this.props.match.params.id;
        axios.get(`http://www.dell-lee.com/react/api/list.json?id=${id}`)
            .then(res=>{
                this.setState({
                    listData:res.data.data
                });
            })
            .catch(err=>{
                console.log(err);
            });
    }

    render(){
        return (
            <List
                style={{
                    backgroundColor: "#fff"
                }}
                bordered
                dataSource={this.state.listData}
                renderItem={item => <List.Item>{item.title}</List.Item>}
            />
        )
    }

   
}

export default AppList;

相关代码：

插件版本如下：
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^14.1.1",
    "antd": "^4.20.2",
    "axios": "^0.27.2",
    "cra-template": "1.2.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"