Обзор функций¶

import * as 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" action={logoutUser} />
            </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'
            : '';
    }}
/>

function SomeComp() {
    const match = useMatch('/messages');
    return (
        <li className={Boolean(match) ? 'active' : ''} />
    );
}

<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 };
    }}
/>

<Route
    path="project/new"
    action={async ({ request }) => {
        const data = await request.formData();
        const newProject = await createProject(data);
        // it's common to redirect after actions complete,
        // sending the user to the new record
        return redirect(`/projects/${newProject.id}`);
    }}
/>

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>

<Route
    path="project/new"
    action={async ({ request }) => {
        const formData = await request.formData();
        const newProject = await createProject({
            title: formData.get('title'),
            due: formData.get('due'),
        });
        return redirect(`/projects/${newProject.id}`);
    }}
/>

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>
    );
}

function LikeButton({ tweet }) {
    const fetcher = useFetcher();

    // if there is `formData` then it is posting to the action
    const liked = fetcher.formData
        ? // check the formData to be optimistic
          fetcher.formData.get('liked') === 'yes'
        : // if its not posting to the action, use the record's value
          tweet.liked;

    return (
        <fetcher.Form method="post" action="toggle-liked">
            <button
                type="submit"
                name="liked"
                value={liked ? 'yes' : 'no'}
            />
        </fetcher.Form>
    );
}

function Tasks() {
    const tasks = useLoaderData();
    return tasks.map((task) => (
        <div>
            <p>{task.name}</p>
            <ToggleCompleteButton task={task} />
        </div>
    ));
}

function ToggleCompleteButton({ task }) {
    const fetcher = useFetcher();

    return (
        <fetcher.Form
            method="post"
            action="/toggle-complete"
        >
            <fieldset disabled={fetcher.state !== 'idle'}>
                <input
                    type="hidden"
                    name="id"
                    value={task.id}
                />
                <input
                    type="hidden"
                    name="status"
                    value={
                        task.complete
                            ? 'incomplete'
                            : 'complete'
                    }
                />
                <button type="submit">
                    {task.status === 'complete'
                        ? 'Mark Incomplete'
                        : 'Mark Complete'}
                </button>
            </fieldset>
        </fetcher.Form>
    );
}

<Route
    path="/"
    loader={() => {
        something.that.throws.an.error();
    }}
    // this will not be rendered
    element={<HappyPath />}
    // but this will instead
    errorElement={<ErrorBoundary />}
/>

<Route
    path="/"
    element={<HappyPath />}
    errorElement={<ErrorBoundary />}
>
    {/* Errors here bubble up to the parent route */}
    <Route path="login" element={<Login />} />
</Route>