Как можно сделать React навигацию по страницам пользователей по их id?

Question

[dualdeazz]

У меня есть главная страница, на которой есть список пользователей, у каждого пользователя есть свой id,имя, возраст. Как мне можно сделать роутинг где при переходе на /id1 будет выводиться страница с данными пользователя id1 и .т .д

Answer 1

[Александр]

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

const users = [
  {
    id: 1,
    firstName: 'John',
    lastName: 'Doe',
    age: 27
  },
  {
    id: 2,
    firstName: 'Emily',
    lastName: 'Green',
    age: 29
  }
];

const Home = () => {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          <Link to={`/${user.id}`}>{user.firstName} {user.lastName}</Link>
        </li>
      ))}
    </ul>
  );
};

const User = () => {
  const params = useParams();
  const id = parseInt(params.id);
  const user = users.find((entry) => entry.id === id);
  if (user === undefined) {
    return <p>User not found</p>;
  }

  return (
    <>
      <ul>
        <li><storng>Firstname</storng>: {user.firstName}</li>
        <li><storng>Lastname</storng>: {user.lastName}</li>
        <li><storng>Age</storng>: {user.age}</li>
      </ul>
      <Link to="/">Go back</Link>
    </>
  );
};

const root = createRoot(document.getElementById('root'));

root.render(
  <BrowserRouter>
    <Routes>
      <Route index element={<Home />} />
      <Route path=":id" element={<User />} />
    </Routes>
  </BrowserRouter>
);

https://reactrouter.com/