反应路由器网址参数，默认值不显示活动

Question

我有一个比赛结果应用程序，它有一个导航栏，显示一个"所有结果"Nav.Link选项来显示所有结果，还有一个"添加结果"Nav.Link选项，允许您输入结果。转折的是，如果我直接点击"添加结果"链接，它应该将其视为我输入比赛编号并在条目中查找的链接，但是如果我在结果页面中并单击那里的条目，它应该转到"添加结果"页面，并填写所有条目信息。

我通过在路由中使用 Url 参数来获得所有工作，因此当您单击"所有结果"链接时，它会转到/result/0但在"所有结果"表中，如果您单击一个条目，它会执行dispatch(push('/result/' + id));

唯一的问题是，当它遵循/result/999999链接时，它不会使匹配Nav.Link处于活动状态。当我单击"添加结果"链接以/result0时确实如此。我认为它只是将当前网址与Nav.Links 中的网址匹配。我真的必须跟踪我在"所有结果"页面中并自己在Nav.Link上设置active属性，还是路由器可以为我做到这一点？

<Nav.Link as={NavLink} to='/results' exact>
All Results
</Nav.Link>
<Nav.Link as={NavLink} to='/result/0' exact>
Add Result
</Nav.Link>
...
<Switch>
<Route path='/' exact component={AllEntriesWrapper} />
<Route path='/results' exact component={AllResultsWrapper} />
<Route path='/result/:entryId' exact component={AddResult} />
</Switch>

Answer 1

为了完成这项工作，我进行了以下更改

• 将链接更改为<Nav.Link as={NavLink} to='/result'>，删除0参数和exact关键字。
• 添加了第 4 条路线，例如<Route path='/results/' exact component{AddResult}/>
• 确保 AddResult 组件处理未定义的ownProps.match.params.entryId的方式与以前处理'0'的方式相同。