Breaking News: Grepper is joining You.com. Read the official announcement!

dynamically define routes separated in different pages for React

Yucky Yak answered on February 24, 2022 Popularity 6/10 Helpfulness 1/10

answer dynamically define routes separated in different pages for React

dynamically define routes separated in different pages for React

Comment

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>
    )
}

Popularity 6/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript routes

Link to this answer
Share Copy Link