react-router-dom下NavLink跳转时路径被追加viewreport前缀问题

问题原因 #

你导航栏中所有NavLink的to属性使用了./开头的相对路径，相对路径会基于当前页面的路由地址进行拼接。当你处于/reportapp/viewreport路径下时，点击./Create这类相对路径就会自动拼接出/reportapp/viewreport/Create的错误地址，这就是路径追加问题的根源。

修复方案 #

把所有NavLink的to属性值从./开头的相对路径，修改为/开头的绝对路径即可。由于你已经给Router组件配置了basename属性，/开头的路径会自动补全你设置的basename前缀，不需要手动拼接。

修改后的导航栏核心代码参考：

<ul className="navbar-nav me-auto mb-2 mb-lg-0">
  <li className="nav-item">
    <NavLink
      className="nav-link"
      aria-current="page"
      to="/"
      exact={true}
    >
      Dashboard
    </NavLink>
  </li>
  <li className="nav-item">
    <NavLink className="nav-link" to="/Create">
      Create Report
    </NavLink>
  </li>
  <li className="nav-item">
    <NavLink className="nav-link" to="/Archive">
      Archived Reports
    </NavLink>
  </li>
  <li className="nav-item">
    <NavLink className="nav-link" to="/Support">
      Support
    </NavLink>
  </li>
  <li className="nav-item">
    <NavLink className="nav-link" to="/Resources">
      Resources
    </NavLink>
  </li>
</ul>

提示：你的路由配置中路径是大小写敏感的（比如配置的是/Create而非/create），NavLink的to属性值大小写要和路由配置保持一致，避免出现匹配失败的问题。

内容的提问来源于stack exchange，提问作者CobraTech