0

First time using nested routes, so I am following this example as well as the article:

https://codesandbox.io/s/nested-routes-react-router-y5pt4?from-embed=&file=/src/index.js:2684-2693 https://learnwithparam.com/blog/how-to-handle-nested-routes-in-react-router/

However, the data that I am fetching has a different structure compared to the example, like a collection of articles.
https://content.guardianapis.com/search?api-key=test

What I am trying to do is to use the pillarName as the main navbar. The sectionName as the sub navbar, to map articles that belong to each subcategory.

The problem is that when I console.log(":infoSectionName", match) the WorldNews component, I get an undefined and so I can't map individual articles.

Source Code : https://codesandbox.io/s/spring-silence-g6q66?file=/src/App.js:5802-5811

I would really appreciate your advice.

Ade N
  • 145
  • 1
  • 1
  • 12

1 Answers1

1

Try defining route like this:

<Route path={`${match.path}/:infoSectionName`} component={WorldNews} />
Jacek Walasik
  • 439
  • 3
  • 10