An object containing the dynamic route parameters
import { useParams } from "react-router";
function SomeComponent() {
let params = useParams();
params.postId;
}
import { useParams } from "react-router";
// given a route like:
<Route path="/posts/:postId" element={<Post />} />;
// or a data route like:
createBrowserRouter([
{
path: "/posts/:postId",
component: Post,
},
]);
// or in routes.ts
route("/posts/:postId", "routes/post.tsx");
Access the params in a component:
import { useParams } from "react-router";
export default function Post() {
let params = useParams();
return <h1>Post: {params.postId}</h1>;
}
Patterns can have multiple params:
"/posts/:postId/comments/:commentId";
All will be available in the params object:
import { useParams } from "react-router";
export default function Post() {
let params = useParams();
return (
<h1>
Post: {params.postId}, Comment: {params.commentId}
</h1>
);
}
Catchall params are defined with *:
"/files/*";
The matched value will be available in the params object as follows:
import { useParams } from "react-router";
export default function File() {
let params = useParams();
let catchall = params["*"];
// ...
}
You can destructure the catchall param:
export default function File() {
let { "*": catchall } = useParams();
console.log(catchall);
}
Returns an object of key/value-pairs of the dynamic params from the current URL that were matched by the routes. Child routes inherit all params from their parent routes.
Assuming a route pattern like
/posts/:postIdis matched by/posts/123thenparams.postIdwill be"123".