按照老师步骤把这个标签放到了外面然后页面就成这样了

index.js
import React, { Component, Fragment } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import ReactDOM from 'react-dom';
//Ant Design库组件
import 'antd/dist/antd.css';
import { Layout } from 'antd';
//网页组件
import AppHeader from './components/header/';
import NewList from './containers/List';
import Detail from './containers/Detail';
//css
import './style.css';
// import { List } from 'rc-field-form';
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={NewList} />
            </Switch>
          </Content>
          <Footer className="footer">Footer</Footer>
        </Layout>
      </BrowserRouter>
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

header/index.js
import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
//请求数据
import axios from 'axios';
//图片
import logo from './logo.png';
//css
import './style.css';
//ant design 组件
import { Menu } from 'antd';
import * as Icon from '@ant-design/icons';

class AppHeader extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
    }
    getMenuItems() {
        return this.state.list.map(item => {
            //获取图标类型
            var type = item.type;
            //将图标创建处理
            var icon = React.createElement(Icon[type]);
            return (
                <Link to='/ccc'>
                    <Menu.Item key={item.id} icon={icon}>
                        {item.title}
                    </Menu.Item>
                </Link>

            )
        })
    }
    componentDidMount() {
        axios.get('https://www.fastmock.site/mock/0c60ed3a118e3a97b197a6a801c87179/react/api/react')
            .then((res) => {
                this.setState({
                    list: res.data.data.list
                })
            })
    }

    render() {
        return (
            <Fragment>
                <img className="logo" alt='img' src={logo} />
                <Menu mode="horizontal" className="menu">
                    {this.getMenuItems()}
                </Menu>
            </Fragment>
        )
    }
}
export default AppHeader;

List/index.js
import React ,{Component} from 'react';
//ant design组件
import { List, Avatar } from 'antd';
//数据请求
import axios from 'axios';
const data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
  ];
class NewList extends Component{
    constructor(props){
        super(props);
        this.state={
            data:[]
        }
    }
    componentDidMount(){
        axios.get('http://www.dell-lee.com/react/api/list.json')
        .then(res=>{
            this.setState({
                data:res.data.data
            })
            console.log(res.data.data);
        })
    }
    render(){
        return (
            <List style={{background:"#fff"}}
      bordered
      dataSource={this.state.data}
      renderItem={item => <List.Item>{item.title}</List.Item>}
    />
  )
    }
}
export default NewList;