参数上的固定路由不呈现分配的组件

Question

这是路由器设置

<Route path="/" component={App}>
   <Route path="/pages(/:section)" component={ Pages }>
     <Route path="/pages/category" component={ Pages.Category }/>
     <Route path="/pages/editor(/:uid)" component={ Pages.Editor }/>
   </Route>
 </Route>

Pages 组件包含 Menu 组件，需要激活按钮取决于 section。这里奇怪的是组件 Pages.Category 没有在 props.children 中传递到 Pages 中，所以它根本没有被渲染。一旦我从 path="/pages(/:section)" 中删除 (/:section)，`Pages.Category 就会按预期呈现。编辑器路线也一样。这是预期的行为吗？难道我做错了什么？

Answer 1

是的，根据我的经验，这是预期的行为。

您的<Route path="/pages(/:section)" component={ Pages }>是一个路由组。您只能定义基数 URL。现在您的路由器匹配此路由并显示 'Pages' 组件。它显示第一个匹配项，这是第一个匹配项。你的代码应该看起来像这样让小组工作：

<Route path="/" component={App}>
   <Route path="pages" component={ Pages }>
     <Route path="category" component={ Pages.Category }/>
     <Route path="editor(/:uid)" component={ Pages.Editor }/>
   </Route>
 </Route>

您不能在绝对值之上构建 URL :

If a route uses a relative path, it builds upon the accumulated path of its ancestors. Nested routes may opt-out of this behavior by using an absolute path.

现在你不能直接在'Pages'组件中访问你所在的页面，但你可以从this.props.location.pathname读取当前的完整路径。使用一点正则表达式，您可以找到当前显示的组件：

this.props.location.pathname.match(/([a-z0-9]+)/g)[1]
// Will give 'category' or 'editor'

我在 CodePen 上有一个工作示例：http://codepen.io/loico/pen/VjqKvg#/pages/category

参数上的固定路由不呈现分配的组件

Fixed route on a param is not rendering the assigned component

params

react-router