Use react router in client components.

[carloslato]

Hi guys, I am testing the client components and I would like to know if it is possible to use react libraries like React Router. I tried but I got some errors in console:

Uncaught TypeError: d.current is null

My goal is to deploy an app in cloudflare pages and use /functions for the backend. My other alternative to solve my problem is to simply use React for the frontend, but I wanted to know if there was a way to do it entirely with hono.

[Luzefiru]

I've got a sample repository with Hono on Cloudflare Pages found here.

How it Works

The index path / renders the React client it simply calls a script to hydrate the React Router <RouteSwitch /> component. This successfully maps wildcard routes when you navigate to them via URL and you can simply start coding a SPA-like experience in the <RouteSwitch /> file.

After setting up the React script serving & router switching, you can add any routes or middleware just like you would any Hono app to the index.tsx file.

For Improvement

If you have any feedback for it, feel free to raise an issue or make a PR as I'd like to improve on it for future reference. I hope this helps!

[carloslato]

Look great, thanks. I will check it

[ntk221]

In my case, I've used HashRouter instead of BrowserRouter. This prevents additional server requests when switching paths in the browser.

[Luzefiru]

You're right @ntk221! That would save a ton of requests. Thank you for pointing that out.