@rbxts/react-router

The roblox-ts compiler completely changed how developers build games on Roblox by letting us write strict TypeScript instead of Luau. That inevitably led to people porting React over (@rbxts/react). It was amazing for building UI components, but there was one massive problem: navigation. If you wanted to switch between a main menu, an inventory screen, and a shop, you basically had to write a messy, custom state machine to toggle UI frames on and off.

I got tired of writing that boilerplate, so I built @rbxts/react-router. It’s a direct port of the logic behind the web’s legendary react-router, tailored specifically for the Roblox engine.

The Problem I Was Trying to Solve

1. Zero Boilerplate: I wanted developers to stop manually hiding and showing UI frames. The router should handle what is visible based on a declarative “path.”
2. Familiar Muscle Memory: If you know how to use React Router on the web, you should instantly know how to use this library. The API had to be a 1:1 match.
3. Handle the Complex Stuff: It needed to support nested layouts and dynamic URL parameters (like pulling up an item screen via /shop/items/:itemId).

What’s In The Box

1. Declarative Routing:

   • You get the classic <Router>, <Route>, and <Link> components. You map string paths to your UI components, and the library handles the rest.

2. In-Memory History:

   • Roblox doesn’t have a URL bar or a browser back button. I had to build a custom virtual history stack in memory to handle pushing routes, popping routes, and navigating back/forward natively.

3. Dynamic Parameters & Hooks:

   • Need to grab a user ID from a path? Just use useParams(). Want to programmatically redirect a player? Call useHistory(). It’s all built on modern React hooks.

The Stack

• Language: Strict TypeScript
• Environment: The Roblox-TS ecosystem
• Foundation: Built tightly around @rbxts/react
• Distribution: Shipped to NPM so anyone can npm install it into their Roblox projects.

The Impact

I pushed this out to NPM open-source, and it immediately filled a massive void in the Roblox-TS community. Developers rely on it to build massive, multi-page user interfaces without their codebases devolving into spaghetti state.

“Having used React and React Router extensively in web development, I felt the pain of managing complex UI states in Roblox firsthand. The goal was to bring that same declarative elegance to @rbxts/react. The biggest challenge was adapting browser-centric concepts to a game environment. It’s incredibly rewarding to see other developers using a tool you built to create their own amazing experiences.”