如何让相同的路由路径命中不同的组件

Question

我在使用 React 路由器及其路由路径时遇到问题。

我有几个链接，比如说

1. 本地主机:3000/a
2. 本地主机:3000/b
3. 本地主机:3000/c

我的路线是这样设置的：

<Route exact path="/:cat" component={Post} />

我的问题是，无论何时我转到三个 URL 之一，即 1 -> 3，它只会加载第 1 页，因为它们都符合条件（即 path="/:cat"）。我假设它不会渲染每条路径是否正确，因为它们被称为一条路线，因此不需要渲染，因为 "state" 没有改变？

Answer 1

它的一条路线和任何匹配的路径（/a 或 /b）将呈现该 Post 组件。

<Route exact path="/:cat" component={Post} />

此路由将允许您为每个从 / 开始的 url 呈现 Post 组件，并且此组件将在 this.props.routeParams.cat 中包含实际的 url。

您可以在 Post 组件中使用此属性来调用适当的子组件。即检查 this.props.routeParams.cat = a ，然后调用 <ComponentA />.