React 路由传参方法

在写react-router-dom 的demo时，需要将商品信息传递给子路由组件，即将Products组件的商品信息传给Product组件进行渲染。

Products路由组件结构如下图

import React from 'react'

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


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

// 需要将下表数据传给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路由的数据全部传给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的数据传递给子路由组件，这里使用的时ES6的扩展运算符{...props}，如果不具体传值（比如这里的 data={productsData}），props里面没有productsData。

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

Product组件结构如下

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信息