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>
  );
}

不要在每个路由的相同路径字符串中使用相同的路径参数两次。