solid-router-fix-link-duplicate-children v0.1.5

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="/aboud">{() => <p>AboutPage</p>}</Route>
          </Router>
        </div>
      )}
    </ContextProvider>
  ),
  document.getElementById('root'),
);

Server Side Rendering

import http from 'http';
import { renderToString } from 'solid-js/dom';
// webpack: alias to 'solid-router/server'
import { ContextProvider } from 'solid-router';
import App from './app';

const server = http.createServer((req, res) => {
  res.write(
    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