这个组件里面包含List组件

import React,{Component} from 'react';

import {Link} from 'react-router-dom';

import {List} from 'antd';

import axios from "axios";

class pageList extends Component{

constructor(props){

super(props);

this.state={

data:[]

}

}

以下是一个主要js文件

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

import ReactDom from 'react-dom';

import 'antd/dist/antd.css' ;

import {Layout} from 'antd';

import "./style.css";

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

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

import AppHeader from './components/Header/';

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

const {Header,Content,Footer}=Layout;

// <!--通过样式库进行页面布局-->

class App extends Component{

render(){

return (

<BrowserRouter>

<Fragment>

      <Layout style={{minWidth:1300}}>

        <Header className="app-header">

<AppHeader />

</Header>

        <Content className="app-content">

<Switch>

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

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

</Switch>

</Content>

        <Footer className="app-footer">Footer</Footer>

        </Layout>

</Fragment>

</BrowserRouter>

)

}

}

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

render(){

console.log(this.props.match.params.id);

return(

<List 

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

bordered

  dataSource={this.state.data}

   renderItem={item=>( <List.Item>

      {item.title}

      </List.Item>)}

/>

   )

   //item遍历的是data对象item=data[0],...data[9]

}

 componentDidMount(){

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

.then((res)=>{

// console.log(res);

  this.setState({

   data:res.data.data

   })

// console.log(res.data.data);//[{},{},{}]

});

 }

}

export default pageList;

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

render(){

console.log(this.props.match.params.id);

return(

<List 。。。。。。。。

。。。。(以下省略)

这一行把链接上的参数传给了List组件，为什么List组件外面render函数的this.props对象也能接收到id值呢？