路径参数名称在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>
  );
}

不要在每个路径字符串中使用相同的路径参数，路线。