We can also persist state using cookies and localStorage. LocalStorage works the same as it would in React app, so we will skip over it. React Router has its own factory function for handling cookies that we will be using createCookieSessionStorage():

const { getSession, commitSession, destroySession } = createCookieSessionStorage({
    cookie: {
        name: "__session",
        secrets: process.env.SECRET,
        httpOnly: true,
        secure: process.env.NODE_ENV === "production",
        sameSite: "lax",
        path: "/",
    },
});

Now we can set and read our cookie via the loader and action, and then pass data down to our component via useLoaderData() as we have done before.

type Level = "child" | "adult" | "expert";

export async function loader({ request }: LoaderFunctionArgs) {
    const {session, keyValue} = await getKeyValue(request);
    const level = (keyValue["read:value"] as Level | undefined) ?? "adult";

    return Response.json({ level }, {
        headers: { "Set-Cookie": await commitSession(session) }
    });
}

export async function action({ request }: ActionFunctionArgs) {
    const session = await getSession(request.headers.get("Cookie"));
    const fd = await request.formData();
    const key = String(fd.get("key"));
    const value = String(fd.get("value")) ?? "adult";

    setKeyValue(session, { [key]: value });

    return new Response(null, {
        status: 204,
        headers: { "Set-Cookie": await commitSession(session)}
    });
}

export default ReadingLevels() {
    const {level} = useLoaderData<typeof loader>();

    return(
        <div>
            <h1>Reading Level</h1>
            <p>Select your preferred reading level.</p>

            <Form method="post">
                <input type="hidden" name="key" value="read:level" />
                <label htmlFor="lvl">Reading level:</label>

                <div>
                    <button type="submit" name="value" value="child">
                        <div>Child</div>
                        <div>Simple words & short sentences</div>
                    </button>
                    
                    <button type="submit" name="value" value="adult">
                        <div>Adult</div>
                        <div>Standard prose with key terms</div>
                    </button>

                    <button type="submit" name="value" value="expert">
                        <div>Expert</div>
                        <div>Technical terms & precise phrasing</div>
                    </button>
                </div>
            </Form>

            <div>
                ....
            <div>
        </div>
    );
}

And here's our working example, which shows 3 topics in three different reading levels.

And that's it, just some of the ways you can handle state in React Router. All three of these methods builds on web fundamentals without having to resort to React hooks for everything. Hopefully you found this useful, or at the very least interesting enough to get you to explore React Router further.