3 replies

How do I use Cloudflare's react-router RequestHandler?

So I've built a javascript react SPA using the Cloudflare vite plugin and it retrieves files from R2 and works well. I have been studying the react-router addressbook tutorial[1] and I am pretty comfortable with it. I created a react-router application per the instructions on the Just Use Vite page[2] and it creates a RequestHandler:

const requestHandler = createRequestHandler(
  () => import("virtual:react-router/server-build"),
  import.meta.env.MODE
);

export default {
  async fetch(request, env, ctx) {
    return requestHandler(request, {
      cloudflare: { env, ctx },
    });
  },
} satisfies ExportedHandler<Env>;

const requestHandler = createRequestHandler(
  () => import("virtual:react-router/server-build"),
  import.meta.env.MODE
);

export default {
  async fetch(request, env, ctx) {
    return requestHandler(request, {
      cloudflare: { env, ctx },
    });
  },
} satisfies ExportedHandler<Env>;

I must be dense, but I don't understand what the

RequestHandler

RequestHandler

is doing at all, and the only documentation I can find for it [3] is no help at all. Using the provided

fetch()

fetch()

function in the SPA is easy. How do I use the async

fetch()

fetch()

function above to make remote requests? Suppose I just want to GET a file from a remote host? Should I rip out the

RequestHandler()

RequestHandler()

and simply treat it like a normal fetch? I can't find any examples on the internet using this function to make remote requests, let alone get files from R2.

Suggestions or pointers to docs or sample code welcome.

Thanks!

[1] https://reactrouter.com/tutorials/address-book
[2] https://blog.cloudflare.com/introducing-the-cloudflare-vite-plugin/
[3] https://api.reactrouter.com/v7/types/_react_router_express.RequestHandler.html

Address Book

The Cloudflare Blog

“Just use Vite”… with the Workers runtime

The Cloudflare Vite plugin integrates Vite, one of the most popular build tools for web development, with the Workers runtime. Today, we are announcing the 1.0 release and official support for React Router v7.

RequestHandler | React Router API Reference

Documentation for React Router API Reference

Cloudflare Developers•9mo ago•

3 replies

omortis

How do I use Cloudflare's react-router RequestHandler?

const requestHandler = createRequestHandler(
  () => import("virtual:react-router/server-build"),
  import.meta.env.MODE
);

export default {
  async fetch(request, env, ctx) {
    return requestHandler(request, {
      cloudflare: { env, ctx },
    });
  },
} satisfies ExportedHandler<Env>;

const requestHandler = createRequestHandler(
  () => import("virtual:react-router/server-build"),
  import.meta.env.MODE
);

export default {
  async fetch(request, env, ctx) {
    return requestHandler(request, {
      cloudflare: { env, ctx },
    });
  },
} satisfies ExportedHandler<Env>;

I must be dense, but I don't understand what the

RequestHandler

RequestHandler

is doing at all, and the only documentation I can find for it [3] is no help at all. Using the provided

fetch()

fetch()

function in the SPA is easy. How do I use the async

fetch()

fetch()

function above to make remote requests? Suppose I just want to GET a file from a remote host? Should I rip out the

RequestHandler()

RequestHandler()

Address Book

The Cloudflare Blog

“Just use Vite”… with the Workers runtime

RequestHandler | React Router API Reference

Documentation for React Router API Reference

How do I use Cloudflare's react-router RequestHandler?

How do I use Cloudflare's react-router RequestHandler?

Similar Threads

Similar Threads

Similar Threads