如何用react-router-dom跳转至全新URL？Link组件路由跳转异常求助

嘿，我之前也踩过这个坑，一看就知道问题出在哪啦！你现在的用的是相对路径，所以才会在当前的search路径后面拼接新路径，而不是跳转到根路由下的buying/renting页面。

问题原因 #

当给的to属性传值时，如果路径开头没有斜杠/，react-router会把它当作相对于当前路由的相对路径。举个例子，你当前在/search/Newcastle%20upon%20Tyne,%20UK/54.978252/-1.61778这个路径下，点击buying/modern-day-flat的Link，就会自动拼在当前路径的最后，变成你看到的嵌套路径。

解决方案 #

只需要把to的路径改成绝对路径，也就是在开头加上斜杠/，让路由从根目录开始匹配：

修改前的代码：

<Link className="displayPicGrid" to={props.property.fields.for_sale?`buying/${props.property.slug}`:`renting/${props.property.slug}`} > 
  <img className="displayPicGrid" src={props.property.fields.images[0].image}></img> 
</Link>

修改后的代码：

<Link className="displayPicGrid" to={props.property.fields.for_sale?`/buying/${props.property.slug}`:`/renting/${props.property.slug}`} > 
  <img className="displayPicGrid" src={props.property.fields.images[0].image}></img> 
</Link>

补充小知识 #

• 绝对路径（带/开头）：始终从根路由/开始构建路径，比如/buying/modern-day-flat会直接跳转到http://localhost:3000/buying/modern-day-flat
• 相对路径（不带/开头）：基于当前所在的路由层级拼接，适合在同一个父路由下的子页面之间跳转

这样修改后，点击Link就会跳转到你预期的页面啦！

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