React Router 6路由导航异常：从Home页跳转路径错误求助

问题场景 #

当前React Router 6的路由配置如下：

<BrowserRouter>
  <ToastContainer autoClose={3000}  />
  <HeaderComponent />
  <Routes>
    <Route path="/" element={!user ? <SignInOutPage /> : <Navigate to="/home" />} />
    
    <Route element={<ProtectedRoute user={user} />}>
      <Route path="shop" element={<ShopPage />} />
      <Route path="shop/:name" element={<CollectionPageComp />} />
      <Route path="home" element={<Homepage />} />
      <Route path="checkout" element={<CheckOutPage />} />
      <Route path="*" element={<NotFound />} />
    </Route>

  </Routes>
</BrowserRouter>

在/home页面点击导航组件时，期望跳转到localhost:3000/shop/:name，但实际跳转路径变成了localhost:3000/home/shop/:name，导航组件代码如下：

const MenuItems = ({item}) => {
  const navigate = useNavigate();
  return (
    <>
      <div className={`${item.size} menu-item`} onClick={() => navigate(`shop/${item.title}`)}>
      <div className="background-image" style={{backgroundImage: `url(${item.imageUrl})` }}/>
        <div className="content">
          <h1 className="title">{item.title.toUpperCase()}</h1>
          <span className="subtitle">Shop Now</span>
        </div>
      </div>
    </>
  );
};

问题原因 #

navigate(shop/${item.title})传入的是相对路径，React Router会将该路径拼接在当前页面路径之后。当处于/home路径时，就会生成/home/shop/:name的跳转路径。

解决方法 #

将导航路径改为绝对路径，只需在路径开头添加斜杠/：

onClick={() => navigate(`/shop/${item.title}`)}

修改后，无论当前处于哪个页面路径，都会跳转到根路径下的shop/:name，即目标路径localhost:3000/shop/:name。

内容的提问来源于stack exchange，提问作者Syed saad shah