React中react-router-dom v6链接管理：修正跳转路径异常

你当前点击Trending链接时跳转到/home/trend，是因为使用了相对路径"trend"，React Router会自动基于当前页面的URL（/home）拼接路径。要跳转到根路径下的/trend，只需要把链接改成绝对路径即可。

修改Home组件中的Trending链接：

<li>
  <Link to="/home">
    <HomeIcon />
    Home
  </Link>
</li>
<li>
  <Link to="/trend">
    <WhatshotIcon />
    Trending
  </Link>
</li>

关键说明 #

React Router v6中，Link的to属性规则：

• 以/开头的是绝对路径，直接基于网站根路径跳转，比如"/trend"会跳转到http://localhost:3000/trend
• 不带/的是相对路径，会基于当前路由的路径拼接，比如在/home页面使用"trend"，就会拼接成/home/trend

你的路由配置里/trend是独立的根级路由，所以必须使用绝对路径才能正确匹配到目标路由。

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