Using match in react routes

Question

Within my <Switch /> I dynamically create routes with a dynamic path in which ideally will all load the same component.

I have a JSON object like so:

{
  "products": [{"name": "car"}]
}

Which just contains an array of products which currently only has one product with the name "car".

In the <Switch /> I loop through the products to create a route like so:

{
  ProductHelper.getAllProductPages().forEach(product => {
          console.log(product.name);
          return (
            <Route path={'/' + product.name + '/:id' } component={Search} />
          );
  })
};

The console log prints out "car" perfectly so i see no issue with getting the product name. However, when I navigate to /car/test I'd expect this to load the Search component but it doesn't.

When I create a route like this:

<Route path='/car/test' component={Search} />

This loads the Search component perfectly to prove that the component doesn't issues.

I really don't understand what im doing wrong here, does anyone have any idea?

Answer 1

Instead of .forEach you should use .map, because forEach doesn't return an array. Map does