import React,{Component , Fragment} from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import AppHeader from "./components/Header";
import { Layout } from 'antd';
import './style.css'
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import List from './containers/List/'
import Detail from './containers/Detail/'
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>
                        /
                    {/* Switch  匹配一个不会继续匹配   */}
                    <Route path='/detail' component={Detail}/>
                    {/*访问根目录，如果/在前那么detail和根路径也会匹配，/显示出根路径 现在detail在前，如果是根路径和detail匹配不上 */}
                    <Route path = '/:id?' component = {List}/>
                    {/*/id可不传*/}
                    </Switch>

                </Content>
                <Footer className = "footer">@copyright Lux.Lin 2022</Footer>
            {/*    css className*/}
            </Layout>
            </BrowserRouter>
        )
    }
}

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

（2）List组件
要在挂载完成后componentDidMount()中请求对应的List接口数据，在页面第一次加载时显示id为1对应的list，这里需要后端的协同使得url后面没有id自动请求id=1的数据。
另：url参数：追加到 URL 上的一个名称/值对。参数以问号 (?) 开始并采用 name=value 的格式。如果存在多个 URL 参数，则参数之间用一个 (&) 符隔开。

    componentDidMount() {
        const id = this.props.match.params.id;
        console.log(id)
        let url = 'http://www.dell-lee.com/react/api/list.json'
        if(id){
            url = url + '?id=' + id
        }
        axios.get(url)
            .then(res => {
                this.setState({
                    data:res.data.data
                })
                console.log(res.data.data)
            })
    }

}

具体点击不同的标题的相关实现是每个Header的每个标题都有一个id对应，请求相应id下的List信息。这里是通过 componentWillReceiveProps(nextProps) 生命周期函数来完成，因为componentDidMount在挂载完成后就不会再执行，而componentWillReceiveProps会在Props发生改变时执行。

    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
                })
                console.log(res.data.data)
            })
    }

那么问题来了 id最初是如何来的？

是在header里从接口获取并在index.js中绑定到即浏览器解析这个地址，list组件接受到这个path里的参数从而拿到的

header 中

     getMenuItems(){
        return this.state.list.map(item =>{
            return (<Menu.Item key={ item.id }   >
                {/*Link需要在Router内部*/}
                <Link to = {`/${item.id}`}>
                    <Icon type = {item.icon} />
                    {item.title}
                </Link>

            </Menu.Item>)
        })

index 中

                    <Switch>
                        /
                    {/* Switch  匹配一个不会继续匹配   */}
                    <Route path='/detail' component={Detail}/>
                    {/*访问根目录，如果/在前那么detail和根路径也会匹配，/显示出根路径 现在detail在前，如果是根路径和detail匹配不上 */}
                    <Route path = '/:id?' component = {List}/>
                    {/*/id可不传*/}
                    </Switch>

当点击一个标题时，当前地址与path = '/:id?'匹配，所以会跳转到List组件，随着把id作为参数传递给List组件，这样完成了组件之间参数的通信。
List

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


class PageList extends Component{
    componentWillReceiveProps(nextProps) {
        console.log(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
                })
                console.log(res.data.data)
            })
    }


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

    render() {
        return    <List
            bordered
            dataSource={this.state.data}
            renderItem={item => (
                <List.Item>
                    <Typography.Text mark>[ITEM]</Typography.Text> {item.title}
                </List.Item>
            )}
        />
    }

    componentDidMount() {
        const id = this.props.match.params.id;
        console.log(id)
        let url = 'http://www.dell-lee.com/react/api/list.json'
        if(id){
            url = url + '?id=' + id
        }
        axios.get(url)
            .then(res => {
                this.setState({
                    data:res.data.data
                })
                console.log(res.data.data)
            })
    }

}

export default PageList;