reactjs - React-router 将错误的组件与类似的匹配匹配

Question

所以我正在开发一个反应应用程序，并有反应路由器库在我的应用程序中显示不同的可能 URL。我有以下内容routes，根据 URL 定义将呈现哪个组件：

<Route path={`/products/:address/:page`} component={Products} />
<Route path={`/products/:productId`} component={ProductDetails} />
<Route render={() => <NotFound/>}/>

第一个期望是这样/products/store/1的：匹配产品并显示产品页面。

第二个期望是这样/products/5e996d123e1e0816242aed80的：并显示产品详细信息。

第三个是后备 UI，如果没有匹配项

我的问题是，如果我在第一个 URL 中并删除页面 (1)，例如/products/store/，反应路由器会感到困惑并尝试匹配第二个路由。

在这两个组件中，我componentDidMount像这样加载参数： this.props.match.params.address对于this.props.match.params.page第一个组件和this.props.match.params.address第二个组件。

理想情况下，如果第一条路线的第二个参数不存在，我想渲染第三条路线。

一种可能的解决方案是将 2nd Route 从 更改/products/:productId为/product/:productId，这样就不会混淆。

有没有更好的解决方案？

标签： reactjsreact-router-v4