Параметри URL

/posts/1
/posts/25
/posts/abc

"1"
"25"
"abc"

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

function PostDetails() {
  const { postId } = useParams();

  return <h1>Ідентифікатор публікації: {postId}</h1>;
}

{
  postId: "42"
}

const { postId } = useParams();
const numericPostId = Number(postId);

<Route path="/users/:userId" element={<UserDetails />} />

function UserDetails() {
  const { userId } = useParams();

  return <p>Користувач: {userId}</p>;
}

import { useEffect, useState } from "react";
import {
  BrowserRouter,
  Link,
  Route,
  Routes,
  useParams,
} from "react-router-dom";

function HomePage() {
  return (
    <main>
      <h1>Публікації</h1>

      <ul>
        <li>
          <Link to="/posts/1">Публікація 1</Link>
        </li>
        <li>
          <Link to="/posts/2">Публікація 2</Link>
        </li>
        <li>
          <Link to="/posts/3">Публікація 3</Link>
        </li>
      </ul>
    </main>
  );
}

function PostDetails() {
  const { postId } = useParams();

  const [post, setPost] = useState(null);
  const [status, setStatus] = useState("loading");
  const [error, setError] = useState("");

  useEffect(() => {
    const controller = new AbortController();

    async function loadPost() {
      setStatus("loading");
      setError("");
      setPost(null);

      try {
        const response = await fetch(
          `https://jsonplaceholder.typicode.com/posts/${postId}`,
          {
            signal: controller.signal,
          },
        );

        if (!response.ok) {
          throw new Error("Не вдалося завантажити публікацію");
        }

        const data = await response.json();

        if (!data.id) {
          throw new Error("Публікацію не знайдено");
        }

        setPost(data);
        setStatus("success");
      } catch (requestError) {
        if (requestError.name === "AbortError") {
          return;
        }

        setError(requestError.message);
        setStatus("error");
      }
    }

    loadPost();

    return () => {
      controller.abort();
    };
  }, [postId]);

  if (status === "loading") {
    return <p>Завантаження публікації...</p>;
  }

  if (status === "error") {
    return <p role="alert">{error}</p>;
  }

  return (
    <main>
      <Link to="/">← До списку публікацій</Link>

      <article>
        <h1>{post.title}</h1>
        <p>{post.body}</p>
      </article>
    </main>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/posts/:postId" element={<PostDetails />} />
        <Route path="*" element={<p>Сторінку не знайдено</p>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

/posts/1
/posts/2

"1" → "2"

useEffect(() => {
  loadPost(postId);
}, [postId]);

useEffect(() => {
  loadPost(postId);
}, []);

<Route
  path="/users/:userId/posts/:postId"
  element={<UserPost />}
/>

/users/7/posts/42

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

function UserPost() {
  const { userId, postId } = useParams();

  return (
    <p>
      Користувач {userId}, публікація {postId}
    </p>
  );
}

Користувач 7, публікація 42

const { userId, postId } = useParams();

useEffect(() => {
  // Завантаження даних користувача та публікації
}, [userId, postId]);

const { postId } = useParams();
const numericPostId = Number(postId);

if (!Number.isInteger(numericPostId) || numericPostId <= 0) {
  return <p>Некоректний ідентифікатор публікації</p>;
}

<Route path="/posts" element={<PostDetails />} />

function PostDetails() {
  const { postId } = useParams();

  // postId буде undefined
}

<Route path="/posts/:postId" element={<PostDetails />} />

<Route path="/posts/:postId" element={<PostDetails />} />

function PostDetails() {
  const { id } = useParams();

  // id буде undefined
}

function PostDetails() {
  const { postId } = useParams();

  return <p>{postId}</p>;
}

useEffect(() => {
  loadPost(postId);
}, []);

useEffect(() => {
  loadPost(postId);
}, [postId]);

const { postId } = useParams();

if (postId > 10) {
  // Значення все одно отримане як рядок
}

const numericPostId = Number(postId);

if (numericPostId > 10) {
  // Робота з числом
}

<Routes>
  <Route path="/posts/:postId" element={<PostDetails />} />
</Routes>