按视频中老师讲解的写的但是当我把header文件里面的index里面加入link标签后页面的那几个标题一直闪烁，控制台也报错，但是不套Link标签就没事

来源：4-2 使用动态路由获取不同列表内容（2）

weixin_慕村1291783

2020-12-18 11:51:59

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

src目录下的index.js文件

import React ,{ Component,Fragment} from 'react';
import ReactDom from 'react-dom';
import 'antd/dist/antd.css';
import './style.css';
import { BrowserRouter,Route,Switch} from 'react-router-dom';
import PageList from './containers/List/index';
import Detail from './containers/Detail/index';

import { Layout } from 'antd';
import AppHeader from './components/header';
const { Header, Footer, Content } = Layout;

class App extends Component{
    render(){
        return (
            <BrowserRouter>
                <Layout style={{minWidth:1300,height:'100%'}}>
                    <Header className="header">
                        <AppHeader />
                    </Header>
                    <Content className="content">
                        <Switch>
                            <Route path="/detail" component={Detail} />
                            <Route path="/" component={PageList} />
                        </Switch>
                    </Content>
                    <Footer className="footer">@copyright Dell-Lee 2018</Footer>
                </Layout>
            </BrowserRouter>
        )
    }
}

ReactDom.render(<App />,document.getElementById('root'))

header文件下的Index.js文件

import React, { Component,Fragment } from 'react';
import Logo from './logo.png';
import './style.css';
import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined, AndroidOutlined,AppleOutlined } from '@ant-design/icons';
import axios from 'axios';
import {Link} from 'react-router-dom';

class AppHeader extends Component {
    constructor(props){
        super(props);
        this.state={
            list:[]
        }
    }
    getMenuItems(){
        return this.state.list.map((item)=>{
            return (
                <Link to="/ccc"><Menu.Item key={item.id} icon={item.icon} >{item.title}</Menu.Item></Link>
                // <Menu.Item key={item.id} icon={item.icon} >{item.title}</Menu.Item>


            )
        })


    }
    render(){
        return (
            <Fragment>
                <img src={Logo} className="app-header-logo" />
                <Menu  mode="horizontal" className="app-header-menu">
                    {this.getMenuItems()}
                </Menu>
            </Fragment>

        )
    }

    componentDidMount(){
        axios.get('http://www.dell-lee.com/react/api/header.json').then(res=>{
            this.setState({
                list:res.data.data
            })
            console.log(res.data.data);
        })
    }

}

export default AppHeader;