React-js undefined props dynamic page when accessing URL directly

Question

I'm trying to create a webshop with React as front-end framework and have gotten stuck on the routing of the products. I currently have all the products in a json table and import these into my webshop which works fine when the product page is accessed through the link but whenever I go to the product page directly I get an error stating that my props are undefined. I have

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

as my router to the product page and link to the page using:

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

The Product page looks like this:

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

Should I keep on "creating" the product pages this way and if so can someone help me with this or should make each product page seperately and link those?