solid-router

A declarative router for solid-js

Installation

npm install solid-router

Usage

Simple routing

import { render } from 'solid-js/dom';
import { ContextProvider } from 'solid-router';

render(
  () => (
    <ContextProvider>
      <div>
        <Router fallback={<p>404 Page</p>}>
          <Route path="/">
            <p>HomePage</p>
          </Route>
          <Route path="/about">
            <p>AboutPage</p>
          </Route>
        </Router>
      </div>
    </ContextProvider>
  ),
  document.getElementById('root'),
);

Server Side Rendering

import http from 'http';
import { renderToString } from 'solid-js/dom';
import { ContextProvider } from 'solid-router/server';

import App from './app';

const server = http.createServer(async (req, res) => {
  res.write(
    await renderToString(() => (
      <ContextProvider
        options={{
          initialEntries: [req.url],
        }}
      >
        <App />
      </ContextProvider>
    )),
  );
  res.end();
});

server.listen(8080, () => {
  console.log('application running at port 8080');
});

Examples

• Simple routing codesanbox
• Route params codesanbox