Looping over data to create "dynamic routes" in React

Question

I have a question to react-router-dom. Is it possible to do something like that?

I use React-Bootstrap so there some wrappers/wrapper components that could be the problem.

I try to create a dynamic route loop:

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

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

and the Component should be created like that:

import {Container} from "react-bootstrap"

export const DetailedProduct = (props) => {
    return (
        <Container>
            <h1>{props.productName}</h1>
            <h3>{props.productDescription}</h3>
            <h5>{props.productPrice}</h5>
        </Container>
    )
}

Thanks for any help in advance :-)

Edit: The index.js file look like this:

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import {BrowserRouter} from "react-router-dom"

ReactDOM.render(
      <React.StrictMode>
              <BrowserRouter>
                    <App/>
              </BrowserRouter>
      </React.StrictMode>,
  document.getElementById('root')
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.

I just wrapped the BrowserRouter over the App. Beside that all code should be default from the create react command.

products is a JavaScript object for testing it looks like this:

export const products = [
  {
    "id": "0",
    "productName": "testProduct0",
    "productDescription": "testDescription",
    "productPrice": 10
  }
,
  {
    "id": "1",
    "productName": "testProduct1",
    "productDescription": "testDescription",
    "productPrice": 20
  }
...

ReactDOM.render(
      <React.StrictMode>
          <div>
              <h1>
                  {products[1].productName}
              </h1>
          </div>
              <BrowserRouter>
                    <App/>
              </BrowserRouter>
      </React.StrictMode>,
  document.getElementById('root')
)

renders me my product name so yes i get the value before BrowserRouter is called.

Did you use any Router or Switch in your code?

Taghi Khavari
– Taghi Khavari

2021-01-02 18:16:26 +00:00
Commented Jan 2, 2021 at 18:16 — Taghi Khavari
– Taghi Khavari, Commented Jan 2, 2021 at 18:16
Does products have value on the first render?

Taghi Khavari
– Taghi Khavari

2021-01-02 18:29:12 +00:00
Commented Jan 2, 2021 at 18:29 — Taghi Khavari
– Taghi Khavari, Commented Jan 2, 2021 at 18:29

halfer · Accepted Answer · 2021-04-18 18:02:11Z

2

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

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

This was a journey! So I managed to render a dynamic component and link a dynamic route to it.

I missed two things. The '/' before the product.productName and the children={} in the Route.

edited Apr 18, 2021 at 18:02

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Jan 2, 2021 at 20:57

Kranael

731 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taghi Khavari · Accepted Answer · 2021-01-02 18:20:23Z

1

Try this Code:


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

export const ProductRoutesGenerator = () => {
  return products.map((product, index) => {
    return (
      <Route
        exact
        path={product.productName}
        key={index}
        component={<DetailedProduct product={product} />}
      />
    );
  });
};

//=====================

import { Container } from "react-bootstrap";

export const DetailedProduct = ({ product }) => {
  return (
    <Container>
      <h1>{product.productName}</h1>
      <h3>{product.productDescription}</h3>
      <h5>{product.productPrice}</h5>
    </Container>
  );
};

answered Jan 2, 2021 at 18:20

Taghi Khavari

6,6173 gold badges21 silver badges36 bronze badges

1 Comment

Kranael Over a year ago

It dont work. I know that because i have a testcomponent that is linked to the button of product 2. So when i click on the button of product 2 it renders my testcomponent but all other buttons only change the url to /productX and not render any component.

luissmg · Accepted Answer · 2021-01-04 10:19:53Z

1

You are missing a Switch to encapsulate the routes. This should fix the problem:

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

edited Jan 4, 2021 at 10:19

answered Jan 2, 2021 at 18:51

luissmg

5804 silver badges9 bronze badges

6 Comments

luissmg Over a year ago

I changed my answer, there was something wrong I think with the component prop in the route. Can you try it?

Kranael Over a year ago

i will try sure

Kranael Over a year ago

I tried and it dont work. I also tried something but it seems it is impossible to create something like a route generator even when the code is executed and no error are thrown. It just link me to a empty site :/

luissmg Over a year ago

Hmm usually I set my paths as /something. Did you try also adding the slash?

Kranael Over a year ago

<Route exact path={"/testProduct2"} component={testComp}/> <ProductRoutesGenerator/> the testComponent get rendered when i click the button of testProduct2 but the other routes from the "generator" dont trigger. Maybe they dont even exist.

|

Collectives™ on Stack Overflow

Looping over data to create "dynamic routes" in React

3 Answers 3

Comments

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related