@rbxts/react-router

Project Overview: The roblox-ts toolchain has revolutionized Roblox development by enabling the use of TypeScript. This led to the creation of powerful UI libraries like @rbxts/react, which mimic the component-based architecture of React. However, as in-game UIs grew into complex single-screen applications (with shops, inventories, settings, etc.), a major gap appeared: there was no standardized way to manage navigation and “pages.” Developers were left to build messy, manual state management systems to toggle Frame visibility.

To solve this, I developed @rbxts/react-router, an open-source library inspired by the widely-used react-router for the web. It brings a declarative, path-based routing system to @rbxts/react, allowing developers to structure their UI navigation cleanly and intuitively.

Objectives

1. Provide a Familiar API: To create a routing library with an API that is nearly identical to react-router, making it immediately accessible to the large community of developers already familiar with React.
2. Abstract UI State Management: To eliminate the boilerplate code associated with manually showing and hiding different UI screens. The router should handle which component is visible based on the current “path.”
3. Enable Complex UI Architectures: To empower developers to build sophisticated, multi-page UIs with features like nested routes and dynamic paths (e.g., viewing a specific item in a shop via a path like /shop/items/:itemId).

Features

1. Component-Based Routing:

   • Provides core components like <Router>, <Route>, and <Link> that work just like their web counterparts. Developers can declaratively map paths to specific UI components.

2. In-Memory History:

   • Since Roblox has no URL bar, the library manages a virtual history stack in memory. This allows for seamless navigation, including “back” and “forward” functionality, without browser dependencies.

3. Dynamic Path Parameters:

   • Supports dynamic segments in paths (e.g., /profile/:userId), which are passed as props to the rendered component. This is essential for creating detail pages for specific game items or players.

4. Hooks-Based API:

   • Includes a modern, hooks-based API (useHistory, useParams) for interacting with the router state from within functional components, aligning with modern React practices.

Technology Stack

• Core Language: TypeScript
• Environment: Roblox-TS toolchain
• Framework: Built on top of @rbxts/react
• Package Management & Distribution: Published and managed on NPM
• Version Control: Git & GitHub for open-source collaboration.

Outcome

@rbxts/react-router was successfully developed and published to NPM, where it is now available to the entire roblox-ts community. It fills a critical void in the UI development ecosystem, has been adopted by other developers, and is now a key tool for building sophisticated user interfaces in a clean, scalable way.

Developer Reflection

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 the browser-centric concepts of URLs and history to a self-contained game environment. Building this library not only helped solve a problem for the community but also deepened my own understanding of routing principles and the @rbxts/react reconciliation process. It’s incredibly rewarding to see other developers using a tool you built to create their own amazing experiences.