React Router跳转时URL拼接错误无法访问目标页如何解决？

React Router 的 Link 组件 to 属性的取值如果不带开头的 / 符号，会被判定为相对路径，跳转时会自动拼接当前页面的URL前缀。你当前在 /CheckOut 页面跳转 to="Comprar" 时，就会拼接出 /CheckOut/Comprar 的路径，和你在App.js中定义的根路径下的 /Comprar 路由不匹配，所以无法正常访问。

将所有Link组件的to属性值改为以/开头的绝对路径即可：

1. 修改DefineDestino.js中的跳转链接：
   将原代码

<Link to={"CheckOut"}>Realizar Checkout</Link>

修改为

<Link to={"/CheckOut"}>Realizar Checkout</Link>

2. 修改CheckOut.js中的跳转链接：
   将原代码

<Link to={"Comprar"}>Comprar passagem</Link>

修改为

<Link to={"/Comprar"}>Comprar passagem</Link>

CheckOut.js中导入的BrowserRouter as Router, Route, Routes属于冗余代码，你已经在App.js外层统一包裹了Router，内层页面不需要重复导入和使用，可以直接删除这部分导入语句。

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