老师，当我点击列表中的内容时切换不了不同的

src index.js

import React, {Component,Fragment} from 'react';

import ReactDom from 'react-dom';

import 'antd/dist/antd.css';

import {BrowserRouter,Route,Switch} from 'react-router-dom';

import { Layout } from 'antd';

import List from './containers/List/';

import Detail from './containers/Detail/';

import './style.css';

import AppHeader from './components/Header/'

const { Header, Footer, Content } = Layout;

class App extends Component{

      render() {

        console.log(this.props);

      return (

        <BrowserRouter>

      <Layout style={{minWidth:1100,height:'100%'}}>

               <Header className="header">

                  <AppHeader />

               </Header>

               <Content className="content">

                   <Switch>

                        <Route path='/detail' component= {Detail} />

                        <Route path='/:id' component={List} />  

                   </Switch>

               </Content>

               <Footer className="footer">@copyright  </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 { Menu,Icon} from 'antd';

import logo from './logo.png';

import './style.css';

class AppHeader extends Component{

    constructor(props){

      super(props);

      this.state = {

        list: [{

          id:1,

          Icon:"usergroup-delete",

          title:"VOA慢速英语"

        },{

          id:2,

          Icon:"idcard",

          title:"VOA常速英语"

        },{

          id:3,

          Icon:"dingding",

          title:"VOA英文教学"

        },{

          id:4,

          Icon:"google",

          title:"走遍美国"

        },{

          id:5,

          Icon:"wechat",

          title:"空中英语教室"

        },{

          id:6,

          Icon:"dribbble",

          title:"大家说英语"

        }]

      }

    }

    getMenuItems(){

      return this.state.list.map(item=>{

        return (

             <Menu.Item key={item.id}>

                  <Link to={`/${item.id}`}>

                       <Icon type={item.Icon}/>{item.title}

                  </Link>

             </Menu.Item>

          )

      })

    }

    render(){

    return(

    <Fragment>

               <img src={logo} className="app-header-logo"/>

               <Menu 

                   mode="horizontal"

                   className='app-header-menu'

                   >

                   {this.getMenuItems()}

               </Menu>

            </Fragment>

    )

    }

}

export default AppHeader;

List.js

import React,{ Component } from 'react';

import axios from 'axios';

import { List } from 'antd';

class PageList extends Component {

    componentWillReceiveProps(nextProps){

    const id =nextProps.match.params.id;

axios.get('http://www.dell-lee.com/react/api/list.json?id='+id)

.then(res =>{

this.setState({

data:res.data.data

});

})

    }

    constructor(props){

      super(props);

      this.state={

      data:[]

      }

    }

render() {

return(<List

  style={{background:'#fff'}}

              bordered

              dataSource={this.state.data}

              renderItem={item => (<List.Item> {item.title}</List.Item>)}

    />

    )

}

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({

data:res.data.data

});

})

}

}

export default PageList;