react-router-dom 中如何處理路徑參數名稱沖突？

Question

home/user/:id/friends/:id

function SomeComponent() {
  const { id } = useParams();
}

這里將使用哪個id ？ 存在名稱沖突。

Answer 1

路徑的最后一個參數是任何組件都會看到的值。

這是微不足道的測試。

例子：

const Component = () => {
  const { id } = useParams();

  return <h1>Id: {id}</h1>;
};

export default function App() {
  return (
    <div className="App">
      <Link to="/home/user/123/friends/456">Test?</Link>

      <Routes>
        <Route path="home/user/:id/friends/:id" element={<Component />} />
      </Routes>
    </div>
  );
}

不要在每個路由的相同路徑字符串中使用相同的路徑參數兩次。