在寫react-router-dom 的demo時，需要將商品信息傳遞給子路由組件底瓣，即將Products組件的商品信息傳給Product組件進行渲染厅贪。

Products路由組件結(jié)構(gòu)如下圖

import React from 'react'

import {
   Link,
   Route
} from 'react-router-dom'
import Product from './Product'


const Products = (({match}) => {

// 需要將下表數(shù)據(jù)傳給Product組件
const productsData = [
    {id:1,name:'iPhone',price:500,status:'stocked'},
    {id:2,name:'MiPhone',price:400,status:'stocked'},
    {id:3,name:'SumSung',price:300,status:'unstocked'}
]

const linkList = productsData.map((product) =>
        <li key={product.id}>
            <Link to={`${match.url}/${product.id}`}>
                {product.name}
            </Link>
        </li>
    )

return (
    <div className="products">
        {console.log('Products-match')}
        {console.log(match)}
        <ul>
            {linkList}
        </ul>
        
        {/*將Products路由的數(shù)據(jù)全部傳給Product路由組件*/}
        <Route path={`${match.url}/:productId`} render={(props) =>(<Product data={productsData} {...props} />) } />
        <Route exact path={match.url} render={() => <h2>select a product please!</h2>} />
    </div>
  )
})

export default Products

這里要將productsData傳遞給Product路由組件中羞福，方法：在render里面渲染時 直接返回 Product組件 并且將Products的數(shù)據(jù)傳遞給子路由組件幻碱，這里使用的時ES6的擴展運算符{...props}，如果不具體傳值（比如這里的 data={productsData}）关带，props里面沒有productsData侥涵。

<Route 
            path={`${match.url}/:productId`} 
            render={(props) =>(<Product data={productsData} {...props} />) } 
        />

Product組件結(jié)構(gòu)如下

import React from 'react'

const Product = ((props) => {
var product = props.data.find(p => p.id.toString() === props.match.params.productId)
var str;
if(product){
    str =   <div className="details">
        <h3>{product.name}</h3>
        <h3>{product.price}</h3>
        <h3>{product.status}</h3>
    </div> 
} else {
    str = <h3>No exiting!</h3>
}
return (
    <div className="product">
        {console.log('Product-props:')}
        {console.log(props)}
        {str}
    </div>
)
})

export default Product

Products傳給子路由組件Product的props的信息如下:

Props信息