时间戳

首页 > 解决方案 > 具有默认值的 React-Router UrlParameter 未显示活动

reactjs - 具有默认值的 React-Router UrlParameter 未显示活动

问题描述

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

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

所有这一切的唯一问题是，当它跟随/result/999999链接时，它不会使匹配Nav.Link处于活动状态。当我单击“添加结果”链接到/result0. 我假设它只是将当前 url 与Nav.Links 中的 url 匹配。我是否真的必须跟踪我在“所有结果”页面中并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>

标签： reactjsreact-router-v4react-bootstrapreact-router-redux

解决方案

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

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

推荐阅读