React中的路由嵌套，及获取路由上传过来的参数。

类比vue中路由跳转及传参：

传递参数：this.$router.push({ 'name':'',params })

接收参数：this.$route.params

React 中如下：

传递参数：<Link to={`/content/${item.aid}`}>{item.title}</Link>

接收参数：this.props.match.params

在接收参数的页面打印  this.props  会得到如下结果： 

 

需求：点击列表，跳转至详情页content里面，在content里面接收从news.js里面传过来的参数。

 在【News.js】组件中，代码如下：

import React,{Component} from 'react';
import { BrowserRouter as Router,Route,Link } from 'react-router-dom'

class News extends Component{
    constructor(props){
        super(props)
        this.state = {
            list:[
                {
                    aid:1,
                    title:'我是新闻111'
                },
                {
                    aid:2,
                    title:'我是新闻222'
                },
                {
                    aid:3,
                    title:'我是新闻333'
                },
                {
                    aid:4,
                    title:'我是新闻444'
                }
            ]
        }
    }
    render(){
        return(
            <div>
                我是news组件
                <ul>
                    {
                        this.state.list.map((item,idx)=>(
                            <li key={idx}>
                                <Link to={`/content/${item.aid}`}>{item.title}</Link>
                            </li>
                        ))
                    }
                </ul>
            </div>
        )
    }
}
export default News;

【content.js】详情页面的组件：

import React,{Component} from 'react'

class Content extends Component{
    constructor(props){
        super(props)
        this.state = {
            
        }
    }
    // 生命周期函数
    componentDidMount(){
        // 接收News.js列表里面传过来的参数
        console.log(this.props.match.params)
    }
    render(){
        return(
            <div>
                新闻详情页面
            </div>
        )
    }
}
export default Content

在【App.js】里面注册路由：

import React,{ Component } from 'react';
import { BrowserRouter as Router,Route,Link } from 'react-router-dom'

import Home from './components/Home'
import News from './components/News'
import Content from './components/Content'

class App extends Component{
  constructor(props){
    super(props)
    this.state = {}
  }
  render(){
    return(
      <Router>
        <div>

          <ul>
            <li><Link to="/">Home页面</Link></li>
            <li><Link to="/news">News页面</Link></li>
          </ul>

          {/* 路由配置 */}
          <Route exact path="/" component={Home}></Route>
          <Route path="/news" component={News}></Route>
          <Route path="/content/:aid" component={Content}></Route>

        </div>
      </Router>
    )
  }
}

export default App;

-------完。