React Router V6 제대로 알기

import React from "react"
import { createRoot } from "react-dom/client"
import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Link,
} from "react-router-dom"

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    ),
  },
  {
    path: "about",
    element: <div>About</div>,
  },
])

createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
)

// Configure nested routes with JSX
createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root />}>
      <Route path="contact" element={<Contact />} />
      <Route
        path="dashboard"
        element={<Dashboard />}
        loader={({ request }) =>
          fetch("/api/dashboard.json", {
            signal: request.signal,
          })
        }
      />
      <Route element={<AuthLayout />}>
        <Route path="login" element={<Login />} loader={redirectIfUser} />
        <Route path="logout" />
      </Route>
    </Route>
  )
)

// Or use plain objects
createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "contact",
        element: <Contact />,
      },
      {
        path: "dashboard",
        element: <Dashboard />,
        loader: ({ request }) =>
          fetch("/api/dashboard.json", {
            signal: request.signal,
          }),
      },
      {
        element: <AuthLayout />,
        children: [
          {
            path: "login",
            element: <Login />,
            loader: redirectIfUser,
          },
          {
            path: "logout",
            action: logoutUser,
          },
        ],
      },
    ],
  },
])

<Route path="projects/:projectId/tasks/:taskId" />

// If the current location is /projects/abc/tasks/3
;<Route
  // sent to loaders
  loader={({ params }) => {
    params.projectId // abc
    params.taskId // 3
  }}
  // and actions
  action={({ params }) => {
    params.projectId // abc
    params.taskId // 3
  }}
  element={<Task />}
/>

function Task() {
  // returned from `useParams`
  const params = useParams()
  params.projectId // abc
  params.taskId // 3
}

function Random() {
  const match = useMatch("/projects/:projectId/tasks/:taskId")
  match.params.projectId // abc
  match.params.taskId // 3
}

<Route path="/teams/:teamId" />
<Route path="/teams/new" />

<NavLink
  style={({ isActive, isPending }) => {
    return {
      color: isActive ? "red" : "inherit",
    }
  }}
  className={({ isActive, isPending }) => {
    return isActive ? "active" : isPending ? "pending" : ""
  }}
/>

<Route path="home" element={<Home />}>
  <Route path="project/:projectId" element={<Project />}>
    <Route path=":taskId" element={<Task />} />
  </Route>
</Route>

<Home>
  <Project />
</Home>

<Route
  path="/"
  loader={async ({ request }) => {
    // loaders can be async functions
    const res = await fetch("/api/user.json", {
      signal: request.signal,
    })
    const user = await res.json()
    return user
  }}
  element={<Root />}
>
  <Route
    path=":teamId"
    // loaders understand Fetch Responses and will automatically
    // unwrap the res.json(), so you can simply return a fetch
    loader={({ params }) => {
      return fetch(`/api/teams/${params.teamId}`)
    }}
    element={<Team />}
  >
    <Route
      path=":gameId"
      loader={({ params }) => {
        // of course you can use any data store
        return fakeSdk.getTeam(params.gameId)
      }}
      element={<Game />}
    />
  </Route>
</Route>

function Root() {
  const user = useLoaderData()
  // data from <Route path="/">
}

function Team() {
  const team = useLoaderData()
  // data from <Route path=":teamId">
}

function Game() {
  const game = useLoaderData()
  // data from <Route path=":gameId">
}

<Route
  path="dashboard"
  loader={async () => {
    const user = await fake.getUser()
    if (!user) {
      // if you know you can't render the route, you can
      // throw a redirect to stop executing code here,
      // sending the user to a new route
      throw redirect("/login")
    }

    // otherwise continue
    const stats = await fake.getDashboardStats()
    return { user, stats }
  }}
/>

function Root() {
  const navigation = useNavigation()
  return (
    <div>
      {navigation.state === "loading" && <GlobalSpinner />}
      <FakeSidebar />
      <Outlet />
      <FakeFooter />
    </div>
  )
}

;<Route
  path="issue/:issueId"
  element={<Issue />}
  loader={async ({ params }) => {
    // these are promises, but *not* awaited
    const comments = fake.getIssueComments(params.issueId)
    const history = fake.getIssueHistory(params.issueId)
    // the issue, however, *is* awaited
    const issue = await fake.getIssue(params.issueId)

    // defer enables suspense for the un-awaited promises
    return defer({ issue, comments, history })
  }}
/>

function Issue() {
  const { issue, history, comments } = useLoaderData()
  return (
    <div>
      <IssueDescription issue={issue} />

      {/* Suspense provides the placeholder fallback */}
      <Suspense fallback={<IssueHistorySkeleton />}>
        {/* Await manages the deferred data (promise) */}
        <Await resolve={history}>
          {/* this calls back when the data is resolved */}
          {resolvedHistory => <IssueHistory history={resolvedHistory} />}
        </Await>
      </Suspense>

      <Suspense fallback={<IssueCommentsSkeleton />}>
        <Await resolve={comments}>
          {/* ... or you can use hooks to access the data */}
          <IssueComments />
        </Await>
      </Suspense>
    </div>
  )
}

function IssueComments() {
  const comments = useAsyncValue()
  return <div>{/* ... */}</div>
}

<Form action="/project/new">
  <label>
    Project title
    <br />
    <input type="text" name="title" />
  </label>

  <label>
    Target Finish Date
    <br />
    <input type="date" name="due" />
  </label>
</Form>

function NewProjectForm() {
  const navigation = useNavigation()
  const busy = navigation.state === "submitting"
  return (
    <Form action="/project/new">
      <fieldset disabled={busy}>
        <label>
          Project title
          <br />
          <input type="text" name="title" />
        </label>

        <label>
          Target Finish Date
          <br />
          <input type="date" name="due" />
        </label>
      </fieldset>
      <button type="submit" disabled={busy}>
        {busy ? "Creating..." : "Create"}
      </button>
    </Form>
  )
}