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

Question

第一次使用嵌套路由，因此我将同时关注此示例和文章：

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

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

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

问题是当我console.log（“：infoSectionName”，匹配）WorldNews组件时，我得到了一个[[undefined，因此无法映射单个文章。

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

非常感谢您的建议。

Answer 1

尝试这样定义路线：

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