useParams
declare function useParams<
K extends string = string
>(): Readonly<Params<K>>;
The useParams
hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the <Route path>
. Child routes inherit all params from their parent routes.
import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';
function ProfilePage() {
// Get the userId param from the URL.
let { userId } = useParams();
// ...
}
function App() {
return (
<Routes>
<Route path="users">
<Route path="me" element={...} />
<Route path=":userId" element={<ProfilePage />} />
</Route>
</Routes>
);
}