JAVASCRIPT

dynamically define routes separated in different pages for React

import React from "react"
import {products} from "../data/Products"
import {Route, Switch} from "react-router-dom"
import {DetailedProduct} from "../components/DetailedProduct"

export const ProductRoutesGenerator = () => {
    return (
        <Switch>
            {products.map((product) => {
                return (
                    <Route
                        exact
                        key={product.id}
                        path={product.productName}
                    >
                        <DetailedProduct {...product} />
                    </Route>
                )
            })}
        <Switch>
    )
}