Route Parameters

Use route parameters to create dynamic routes for individual blog pages.

Route parameters create dynamic URLs like /blogs/123.

Setting Up

<Route path="/blogs/:id">
  <BlogDetails />
</Route>

Accessing Parameters

import { useParams } from "react-router-dom";

const BlogDetails = () => {
  const { id } = useParams();
  const { data: blog, isPending, error } = useFetch(
    "http://localhost:8000/blogs/" + id
  );

  return (
    <div>
      {isPending && <div>Loading...</div>}
      {error && <div>{error}</div>}
      {blog && <h1>{blog.title}</h1>}
    </div>
  );
};