Пример для Solid.js

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

syncMobxWithSolid.tsx

template.html

build.ts

package.json

plugins.ts

tsconfig.json

import { enableObservable } from 'kr-observable/solidjs';
import { hydrate, render } from 'solid-js/web';

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

if (REACTIVITY_SYSTEM === 'kr-observable') {
  enableObservable(false);
}

if (REACTIVITY_SYSTEM === 'mobx') {
  syncMobxWithSolid();
}

const router = getRouter();

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

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

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

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

Скачивание

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

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

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