Context Sharing Middleware

This example demonstrates how server-side middleware can share data with loaders using React Router's context system.

Data loaded successfully with context from middleware!

Request Info (set by middleware, read by loader)

Request ID:
64f06c86-2724-4c5d-b04c-7a6f224c8ef1
Timestamp:
2026-01-11T20:46:48.039Z
User Agent:
Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)

How it works

  1. Create a context with createContext() from react-router
  2. In middleware, get the router context via c.get("context")
  3. Set data using context.set(yourContext, value)
  4. In loaders, read data using context.get(yourContext)

context-sharing.tsx (context definition)

import { createContext } from "react-router";

export interface RequestInfo {
  requestId: string;
  timestamp: string;
  userAgent: string;
}

export const requestInfoContext =
  createContext<RequestInfo>();

context-sharing.ts (middleware + loader)

import { Hono } from "hono";
import type { AppEnv } from "@udibo/juniper/server";
import {
  requestInfoContext,
  type RequestInfo,
} from "./context-sharing.tsx";

const app = new Hono<AppEnv>();

app.use(async (c, next) => {
  const context = c.get("context");

  const requestInfo: RequestInfo = {
    requestId: crypto.randomUUID(),
    timestamp: new Date().toISOString(),
    userAgent: c.req.header("user-agent"),
  };

  context.set(requestInfoContext, requestInfo);
  await next();
});

export default app;

export async function loader({ context }) {
  const requestInfo = context.get(requestInfoContext);
  return { requestInfo };
}