Comment utiliser une route imbriquée

1
import {
2
  href,
3
  NavLink,
4
  Outlet,
5
  useLoaderData,
6
  isRouteErrorResponse,
7
  useRouteError,
8
  type ActionFunctionArgs,
9
} from 'react-router';
10
import { getUsers, addUser } from '~/users.server';
11

12
export async function loader() {
13
  return { users: await getUsers() };      // ^? Chargement serveur
14
}
15

16
export default function UsersLayout() {
17
  const { users } = useLoaderData<typeof loader>();
18
  return (
19
    <div className="flex gap-4 p-4">
20
      <ul className="w-80 space-y-2">
21
        <div className="flex justify-between items-center">
22
          <h1 className="text-xl font-bold">Utilisateurs</h1>
23
          <NavLink
24
            to={href('/users/:userSlug', { userSlug: 'new' })}
25
            className="px-3 py-1 bg-green-600 text-white rounded"
26
          >
27
            Ajouter
28
          </NavLink>
29
        </div>
30
        {users.map((u) => (
31
          <li key={u.id}>
32
            <NavLink
33
              to={href('/users/:userSlug', { userSlug: u.slug })}
34
              className={({ isActive }) =>
35
                isActive
36
                  ? 'block p-2 bg-blue-600 text-white rounded'
37
                  : 'block p-2 hover:bg-gray-100 rounded'
38
              }
39
            >
40
              {u.name}
41
            </NavLink>
42
          </li>
43
        ))}
44
      </ul>
45
      <div className="flex-1 bg-gray-50 p-4 rounded shadow">
46
        <Outlet />                           // ^? Zone enfant
47
      </div>
48
    </div>
49
  );
50
}
51

52
export async function action({ request }: ActionFunctionArgs) {
53
  const form = await request.formData();
54
  await addUser({ name: form.get('name') as string });
55
  return null;
56
}
57

58
export function ErrorBoundary() {
59
  const error = useRouteError();
60
  if (isRouteErrorResponse(error)) {
61
    return <p className="text-red-500">{error.statusText}</p>;
62
  }
63
  return <p className="text-red-500">Erreur inattendue</p>;
64
}

1
export default function UsersIndex() {
2
  return (
3
    <h2 className="text-center text-gray-600">
4
      Sélectionne un profil
5
    </h2>
6
  );
7
}

1
import { index, route, type RouteConfig } from '@react-router/dev/routes';
2

3
export default [
4
  index('routes/home.tsx'),
5
  route('users', 'routes/_usersLayout.tsx', [
6
    index('routes/users.index.tsx'),
7
    route(':userSlug', 'routes/users.$userSlug.tsx'),
8
  ]),
9
] satisfies RouteConfig;

1
import {
2
  Form,
3
  useLoaderData,
4
  useParams,
5
  isRouteErrorResponse,
6
  useRouteError,
7
  redirect,
8
  href,
9
} from 'react-router';
10
import { getUserBySlug, addUser, updateUser } from '~/users.server';
11

12
export async function loader({ params }) {
13
  const slug = params.userSlug!;
14
  if (slug === 'new') return { user: null };
15
  const user = await getUserBySlug({ slug });
16
  if (!user) throw new Response('Non trouvé', { status: 404 });
17
  return { user };
18
}
19

20
export async function action({ request, params }) {
21
  const form = await request.formData();
22
  const name = form.get('name') as string;
23
  const slug = params.userSlug!;
24
  if (slug === 'new') {
25
    const u = await addUser({ name });
26
    return redirect(href('/users/:userSlug', { userSlug: u.slug }));
27
  }
28
  const u = await updateUser({ slug, name });
29
  return redirect(href('/users/:userSlug', { userSlug: u.slug }));
30
}
31

32
export default function UserForm() {
33
  const { user } = useLoaderData<typeof loader>();
34
  const { userSlug } = useParams();
35
  const isNew = userSlug === 'new';
36
  return (
37
    <Form method="post" className="space-y-2">
38
      <h2 className="text-lg font-semibold">
39
        {isNew ? 'Nouveau profil' : 'Modifier profil'}
40
      </h2>
41
      <input
42
        name="name"
43
        defaultValue={user?.name ?? ''}
44
        className="w-full border px-2 py-1 rounded"
45
      />
46
      <button
47
        type="submit"
48
        className={`px-4 py-1 text-white rounded ${
49
          isNew ? 'bg-green-600' : 'bg-blue-600'
50
        }`}
51
      >
52
        {isNew ? 'Créer' : 'Enregistrer'}
53
      </button>
54
    </Form>
55
  );
56
}
57

58
export function ErrorBoundary() {
59
  const error = useRouteError();
60
  if (isRouteErrorResponse(error)) {
61
    return <p className="text-red-600">{error.status} {error.statusText}</p>;
62
  }
63
  return <p className="text-red-600">Erreur inconnue</p>;
64
}