Example for Solid.js

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

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');
}

Download

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

Then choose the mode and reactivity system to run:

• npm run solid — CSR (client-side rendering only) for Solid.js reactivity
• npm run mobx — CSR (client-side rendering only) for MobX
• npm run observable — CSR (client-side rendering only) for Observable
• npm run ssr-solid — SSR for Solid.js reactivity
• npm run ssr-mobx — SSR for MobX
• npm run ssr-observable — SSR for Observable