NavLink跳转异常：无法跳转到带参数的/auth子路由问题排查

我使用React Router的NavLink组件创建了两个跳转按钮，分别指向/auth/register和/auth/login，用于跳转到注册和登录页面，但点击按钮后始终只会跳转到/auth，无法带上后续的路径参数。手动在地址栏输入完整链接时，页面能正常加载对应内容。

相关代码片段 #

NavLink组件代码：

<NavLink to={`/auth/register`}><button className={styles["btn-register"]}>Zarejestruj się</button></NavLink>
<NavLink to={`/auth/login`}><button className={styles["btn-login"]}>Zaloguj się</button></NavLink>

对应路由配置：

{ path: 'auth/:id', element: <LoginPage /> },

排查与解决过程 #

经过排查发现，项目中新增了另一个导航栏组件，而我之前修改的是项目未实际使用的旧导航栏，所有跳转逻辑的修改都没有生效。切换到正在使用的导航栏组件进行对应修改后，跳转功能恢复正常，点击按钮可以正确跳转到/auth/register和/auth/login页面。

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