带参数路由下如何跳转至原始路由？React路由问题咨询

这个问题其实挺常见的，核心原因是你侧边栏的NavLink用了相对路径，而非绝对路径。当你处于/update-user.html/8这个路由页面时，点击相对路径的users.html，React Router会自动把它拼在当前路径的后面，结果就变成了/update-user.html/users.html——这就是跳转出错的根源。

具体修复步骤： #

1. 将侧边栏的NavLink改为绝对路径
   把侧边栏里所有to属性的值都加上开头的斜杠/，确保路径从根路由开始匹配：

   <ul className="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
     <li className="nav-item">
       <NavLink exact to="/" className="nav-link">
         <p>Dashboard</p>
       </NavLink>
     </li>
     <li className="nav-item">
       {/* 改为绝对路径 /widgets.html */}
       <NavLink to="/widgets.html" className="nav-link">
         <p>Widgets</p>
       </NavLink>
     </li>
     <li className="nav-item">
       {/* 改为绝对路径 /users.html */}
       <NavLink to="/users.html" className="nav-link">
         <p>Users List</p>
       </NavLink>
     </li>
   </ul>
   

2. 修复users.js中Delete User的跳转路径
   你会发现Delete按钮的NavLink也用了相对路径，同样会触发类似问题，一并改成绝对路径：

   <td><NavLink to={`/delete-user.html/${user.id}`} className="btn btn-danger">Delete User</NavLink></td>
   

原理说明： #

React Router里，以/开头的路径是绝对路径，会从HashRouter的根路径（/#/之后）开始匹配；而不带/的是相对路径，会基于当前所在的路由路径进行拼接，这就是你遇到错误跳转的核心原因。建议你统一项目中所有路由跳转的to属性使用绝对路径，避免后续再出现类似的路径拼接问题。

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