反应路由器redux url

Question

我正在使用 react、react router v4 和 redux/react-router-redux 制作我的第一个 Web 应用。

这是一个购物网站。我在商店中保存了我的产品列表，并且可以正常访问它们。我已经制作了一个产品列表页面，当单击产品的图像时，我有路由设置将我带到一个新的 url(/'productmodel')。

目前我有一个“ProductPage”组件，我已经为我的路由器中的每个相应路由传递了与特定产品相关的道具。这似乎是一个很长的路要走。

我想做的是为每个路由渲染，然后让 ProductPage 组件本身，根据路由（URL 地址）渲染正确的产品。

最好的方法是什么？

提前谢谢你:)

Answer 1

好的，所以我设法做到了！

我创建了一个 ProductPageContainer 以便从商店传递我的产品列表：

function mapStateToProps(state) {
    let products = state.kitsProducts;
    return {
    products: products
    };
};

然后，在我的组件中，我从参数中获取了 productid；正如侯赛因所建议的：

createProductPageComponent() {
    let activeProduct = this.props.products.filter(product => product.id === this.props.match.params.productid)
    return activeProduct.map(product =>{
        return (
            <ProductPage
                key={product.id}
                brand={product.brand}
                productName={product.model.toUpperCase()}
                price={"£"+product.price}
                productImage={product.image}
                text={product.text}
            />
        )
    })
}

现在我的产品页面呈现到正确的路线，这取决于在上一个产品列表页面中选择了哪个产品。以及正确的产品，取决于它被渲染的路线。

谢谢侯赛因！！！你对我的帮助超出了你的想象！

Answer 2

你在追求这样的事情吗？

产品列表页面：

....

render() {
   <div>
       {this.props.products.map(product => 
           <Link key={product.id} to={"/product/"+product.id}>
               {product.name}
           </Link>
       )}
   </div> 
}

....

产品页面：

....

componentWillMount() {
    this.props.actions.getProduct(this.props.match.params.productid);
}

....

render() {
   <div>
       <span>{this.props.product.name}</Link>
   </div> 
}
....

您的产品页面路径如下所示：

<Route exact path="product/:productid" component={ProductPage} />

所以这里发生的情况是，当您在“产品列表”页面上单击产品时，您会被重定向到以产品 ID 作为参数的产品页面。在产品页面上的组件挂载上，您从参数（url）中检索传递 productid 的产品。