使用Material UI的Link组件跳转出现路由堆叠问题怎么解决？

问题根源 #

该问题是因为你给Material UI的Link组件to属性传入了相对路径：没有前缀斜杠/的路由会基于当前页面的路径做拼接，因此你在/home路径下跳转contact时，会自动拼接为/home/contact。

最优解决方案：统一使用绝对路径定义跳转 #

所有路由跳转的路径前统一加前缀斜杠/，明确指定为根路径下的绝对路由即可：

错误写法（相对路径，会触发路径拼接）

<Link to="contact">联系我们</Link>
<Link to="home">首页</Link>

正确写法（绝对路径，直接跳转至根路径下对应路由）

<Link to="/contact">联系我们</Link>
<Link to="/home">首页</Link>
<Link to="/login">登录</Link>

可选解决方案：使用replace属性替换历史栈 #

如果你有业务场景必须使用相对路径，可给Link组件添加replace属性，跳转时会直接替换当前历史栈而非追加新路径，也能避免路径堆叠问题：

<Link to="contact" replace>联系我们</Link>

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