React integration for Real-Router
npm install @real-router/react

React integration for Real-Router — hooks, components, and context providers.
``bash`
npm install @real-router/react @real-router/core @real-router/browser-pluginor
pnpm add @real-router/react @real-router/core @real-router/browser-pluginor
yarn add @real-router/react @real-router/core @real-router/browser-pluginor
bun add @real-router/react @real-router/core @real-router/browser-plugin
Peer Dependencies: react >= 18.0.0
`tsx
import { createRouter } from "@real-router/core";
import { browserPluginFactory } from "@real-router/browser-plugin";
import { RouterProvider, useRoute, Link } from "@real-router/react";
import { createRoot } from "react-dom/client";
// Define routes
const routes = [
{ name: "home", path: "/" },
{ name: "users", path: "/users" },
{ name: "users.profile", path: "/:id" },
];
// Create and configure router
const router = createRouter(routes);
router.usePlugin(browserPluginFactory());
router.start();
// App component
function App() {
const { route } = useRoute();
return (
createRoot(document.getElementById("root")!).render(
);
`
---
#### router: Router
Provides router instance to component tree via React Context.\ — router instance from createRouter()\children: ReactNode — child components\
Wiki
`tsx`
---
#### useRouter(): RouterRouter
Get router instance. Never re-renders on navigation.\
Returns: — router instance\
Wiki
`tsx
import { useRouter } from "@real-router/react";
const NavigateButton = () => {
const router = useRouter();
return ;
}
`
#### useRoute(): { router, route, previousRoute }{ router: Router, route: State | undefined, previousRoute: State | undefined }
Get current route state. Re-renders on every navigation.\
Returns: \
Wiki
`tsx
import { useRoute } from "@real-router/react";
const CurrentRoute = () => {
const { router, route, previousRoute } = useRoute();
return (
Current: {route?.name}
Previous: {previousRoute?.name}
Params: {JSON.stringify(route?.params)}
####
useRouteNode(nodeName: string): { router, route, previousRoute }
Optimized hook for nested routes. Re-renders only when specified node changes.\
nodeName: string — route segment to observe (e.g., "users")
Returns: { router: Router, route: State | undefined, previousRoute: State | undefined }\
Wiki`tsx
import { useRouteNode } from "@real-router/react";const UsersSection = () => {
// Only re-renders when routes starting with "users" change
const { router, route, previousRoute } = useRouteNode("users");
// route is undefined when current route is NOT under "users" node
if (!route) {
return null;
}
switch (route.name) {
case "users":
return ;
case "users.profile":
return ;
default:
return null;
}
}
`---
$3
####
Navigation link with automatic active state detection.\
routeName: string — target route name\
routeParams?: Params — route parameters\
routeOptions?: { reload?, replace? } — navigation options\
activeClassName?: string — class when active (default: "active")
activeStrict?: boolean — exact match only (default: false)
ignoreQueryParams?: boolean — ignore query params in active check (default: true)\
Wiki`tsx
import { Link } from "@real-router/react"; routeName="users.profile"
routeParams={{ id: "123" }}
activeClassName="active"
activeStrict={false}
>
View Profile
`####
Same as Link, but re-renders on every route change.\
Props: same as Link\
Wiki####
Low-level link component. Requires router instance as prop.\
router: Router — router instance\
Props: same as Link\
Wiki---
Migration from react-router5
| API | react-router5 | @real-router/react |
| --------------------------------------------- | ------------- | ------------------ |
|
RouterProvider | ✓ | ✓ |
| Link, ConnectedLink, BaseLink | ✓ | ✓ |
| useRouter, useRoute, useRouteNode | ✓ | ✓ |
| withRouter, withRoute, routeNode | ✓ | ❌ Use hooks |
| Router, Route, RouteNode` (render props) | ✓ | ❌ Use hooks |---
- @real-router/core — Core router
- @real-router/browser-plugin — Browser history
MIT © Oleg Ivanov