反应嵌套路由 - 未定义匹配

Question

第一次使用嵌套路由，所以我在关注这个例子以及文章：

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/

但是，与示例相比，我获取的数据具有不同的结构，例如文章集合。
https://content.guardianapis.com/search?api-key=test

我想要做的是使用 pillarName 作为主导航栏。 sectionName 作为子导航栏，用于映射属于每个子类别的文章。

问题是，当我 console.log(":infoSectionName", match) WorldNews 组件时，我得到一个 undefined，因此我无法映射单个文章。

源代码：https://codesandbox.io/s/spring-silence-g6q66?file=/src/App.js:5802-5811

非常感谢您的建议。

Answer 1

尝试像这样定义路线：

<Route path={`${match.path}/:infoSectionName`} component={WorldNews} />