Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 1x 1x 1x 1x | import type { Route } from '@esmx/router';
import { createElement, useCallback, useSyncExternalStore } from 'react';
import { RouterContext } from './context';
import type { RouterContextValue, RouterProviderProps } from './types';
/**
* RouterProvider component that provides router context to the React tree.
* This must wrap your application to enable routing functionality.
* Uses useSyncExternalStore for optimal React 18+ integration with concurrent features.
*
* @param props - Component props
* @param props.router - Router instance to provide
* @param props.children - Child components
*
* @example
* ```tsx
* import { Router, RouterMode } from '@esmx/router';
* import { RouterProvider } from '@esmx/router-react';
*
* const routes = [
* { path: '/', component: Home },
* { path: '/about', component: About }
* ];
*
* const router = new Router({
* routes,
* mode: RouterMode.history
* });
*
* function App() {
* return (
* <RouterProvider router={router}>
* <Layout>
* <RouterView />
* </Layout>
* </RouterProvider>
* );
* }
* ```
*
* @example
* ```tsx
* // SSR usage - initialize router with server URL
* import { Router, RouterMode } from '@esmx/router';
* import { RouterProvider } from '@esmx/router-react';
*
* const router = new Router({
* routes,
* mode: RouterMode.history,
* base: new URL(serverUrl)
* });
*
* function ServerApp() {
* return (
* <RouterProvider router={router}>
* <App />
* </RouterProvider>
* );
* }
* ```
*/
export function RouterProvider({
router,
children
}: RouterProviderProps): React.ReactElement {
// Subscribe to route changes using useSyncExternalStore
// This ensures proper integration with React 18's concurrent features
const subscribe = useCallback(
(callback: () => void) => {
return router.afterEach(callback);
},
[router]
);
const getSnapshot = useCallback((): Route => {
return router.route;
}, [router]);
const getServerSnapshot = useCallback((): Route => {
return router.route;
}, [router]);
// Subscribe to route changes with useSyncExternalStore for concurrent mode safety
const route = useSyncExternalStore(
subscribe,
getSnapshot,
getServerSnapshot
);
// Create stable context value
const contextValue: RouterContextValue = {
router,
route
};
// Use createElement instead of JSX
return createElement(
RouterContext.Provider,
{ value: contextValue },
children
);
}
RouterProvider.displayName = 'RouterProvider';
|