React嵌套路由导航异常：URL追加旧路径而非跳转目标路由

问题根源在于你使用了相对路径进行导航，React Router中不带斜杠/开头的路径会基于当前所在路由的路径自动拼接，所以从/categorie/1页面跳转时，product/${id}会被解析为/categorie/1/product/${id}，而非预期的根路径下的/product/${id}。

解决方法：改用绝对路径 #

所有导航路径开头加上斜杠/，指定从根路径出发：

1. 修改<Categories />组件的Link：

<Link to={`/categorie/${Categorie.Data[i].id}`}>{Categorie.Data[i].title}</Link>

2. 修改<ProductDetails />组件的导航代码：

• Link方式：

<Link to={`/product/${id}`}>{title}</Link>

• navigate方法：

<CategoryProductActionButton onClick={() => navigate(`/product/${id}`) }>view product</CategoryProductActionButton>

补充说明 #

React Router的路径规则：

• 带/开头：绝对路径，始终从应用根路径开始解析
• 不带/开头：相对路径，基于当前活跃的路由路径进行拼接

在嵌套路由场景下，若需要跳转到同级路由或根下的其他路由，必须使用绝对路径才能避免路径意外追加的问题。

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