Example for React

Since the routing library is a complex integration package that requires a server for SSR and work with the History API, Live Preview is unavailable. However, you can download ready-made examples.

Preview

src

components

App.tsx

Link.tsx

LinkProps.tsx

pages

dynamic

Dynamic.tsx

index.ts

error

Error.tsx

index.ts

home

Home.tsx

index.ts

prevent

index.ts

Prevent.tsx

query

index.ts

Query.tsx

static

index.ts

Static.tsx

client.tsx

declarations.d.ts

router.ts

server.tsx

style.module.css

template.html

build.ts

package.json

plugins.ts

tsconfig.json

import { createRoot, hydrateRoot } from 'react-dom/client';

import { App } from './components/App';
import { getRouter, RouterContext } from './router';

const router = getRouter();

await router.init(location.href, { skipLifecycle: Boolean(SSR_ENABLED) });

if (SSR_ENABLED) {
  hydrateRoot(
    document.getElementById('example-app')!,
    <RouterContext.Provider value={{ router }}>
      <App />
    </RouterContext.Provider>
  );

  console.log('SSR: App has been hydrated, no lifecycle called');
} else {
  createRoot(document.getElementById('example-app')!).render(
    <RouterContext.Provider value={{ router }}>
      <App />
    </RouterContext.Provider>
  );

  console.log('CSR: App has been rendered and lifecycle called');
}

Download

npx degit dkazakov8/reactive-route/examples/react react-example
cd react-example
npm install

Then choose the mode and reactivity system to run:

• npm run mobx — CSR (client-side rendering only) for MobX
• npm run observable — CSR (client-side rendering only) for Observable
• npm run ssr-mobx — SSR for MobX
• npm run ssr-observable — SSR for Observable

Note that in this example, wrapping components in observer is handled by the ESBuild bundler. In your own projects, do not forget to follow the relevant integration guide.