React-Router UrlParameter，默认值未显示为活动状态

Question

我有一个竞赛结果应用程序，其中的导航栏显示一个“所有结果” Nav.Link选项以显示所有结果，一个“添加结果” Nav.Link选项以允许您输入结果。不同之处在于，如果我直接单击“添加结果”链接，则应将其视为输入比赛编号并在条目中查找的一个，但如果我在结果页面中并单击一个条目在那里，它应该转到“添加结果”页面，其中填写了所有条目信息。

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

唯一的问题是，当它跟随/result/999999链接时，不会使匹配的Nav.Link处于活动状态。单击“添加结果”链接到/result0时，它会起作用。我认为这只是将当前网址与Nav.Link中的网址匹配。我是否真的必须跟踪自己位于“所有结果”页面中，并在我自己的active上设置Nav.Link属性，还是路由器可以为我做些什么？

              <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关键字。
• [添加了第四个路线，例如<Route path='/results/' exact component{AddResult}/>
• 确保AddResult组件以与以前处理ownProps.match.params.entryId相同的方式处理未定义'0'。