直接访问URL时React-js未定义的道具动态页面

Question

我正试图创建一个以React为前端框架的网上商店，并陷入产品路由中。我目前将所有产品保存在json表中，然后将其导入到我的网上商店，当通过链接访问产品页面时，它可以正常工作，但是每当我直接转到产品页面时，都会收到错误消息，指出我的道具未定义。我有

                <Router>
                    <Switch>
                        <Route exact path="/products/:productId" component={Product} />
                    </Switch>
                </Router> 

作为我通往产品页面的路由器，并使用以下链接到该页面：

<Link to ={{pathname:`/products/` + product.url, ProductdetailProps:{title: product.title, description: product.text, image: product.image}}}>

产品页面如下：

export const Product = ({location}) => {
        return (
        <div>
            <img src={location.state.image} alt={backupImage}/>
            <p>{location.state.title}</p>
            <p>{location.state.description}</p>
        </div>
    );
};

我应该继续以这种方式“创建”产品页面吗？如果可以的话，有人可以帮助我吗？还是应该单独制作每个产品页面并将它们链接起来？