Пример для React

Так как библиотека роутинга — сложный интеграционный пакет, требующий сервера для SSR и работы с History API, Live 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');
}

Скачивание

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

Затем выберите режим и систему реактивности для запуска:

• npm run mobx — CSR (только клиентский рендеринг) для MobX
• npm run observable — CSR (только клиентский рендеринг) для Observable
• npm run ssr-mobx — SSR для MobX
• npm run ssr-observable — SSR для Observable

Обратите внимание, что в этом примере оборачивание компонентов в observer выполняется сборщиком ESBuild. В собственных проектах не забудьте следовать соответствующему руководству по интеграции.