solid-basic-router v1.0.1

solid-basic-router

A very basic router for Solid.

Getting Started

Add solid-basic-router to your package.json.

npm install --save solid-js solid-basic-router

Example

//
// @todo insert playground link
//
import { render } from 'solid-js/web'
import { Router, useRouter } from 'solid-basic-router'

/**
 * Example application using solid-basic-router.
 *
 * @returns {JSX} Demo app
 */
function App () {
  const [router, { is, match, to }] = useRouter()

  const random = () => {
    const num = Math.random()
    const slug = num > 0.666 ? '' : (num > 0.333 ? 'alpha' : 'bravo')

    to('/projects/' + slug)
  }

  return (
    <>
      <div>
        <a href='#/' classList={{ active: is('/') }}>Home</a>
        <a href='#/about' classList={{ active: is('/about') }}>About</a>
        <a href='#/projects' classList={{ active: match('/projects') }}>Projects</a>
        <a href='#/projects/alpha' classList={{ active: is('/projects/alpha') }}>Project A</a>
        <a href='#/projects/bravo' classList={{ active: is('/projects/bravo') }}>Project B</a>
      </div>

      <Switch fallback={<h2>404</h2>}>
        <Match when={is('/')}>
          <h2>Home Page</h2>
        </Match>

        <Match when={is('/about')}>
          <h2>About Page</h2>
        </Match>

        <Match when={match('/projects')}>
          <h2>Projects Page</h2>
          <p>Slug: {match('/projects/:slug')?.slug ?? 'N/A'}</p>
          <p><button onClick={random}>Random Project</button></p>

          <Switch fallback={<p>Please select one of the projects above</p>}>
            <Match when={router.route === '/projects/alpha'}>
              <h3>Alpha Project</h3>
            </Match>

            <Match when={match('/projects/:slug')?.slug === 'bravo'}>
              <h3>Bravo Project</h3>
            </Match>
          </Switch>
        </Match>
      </Switch>
    </>
  )
}

render(() => (
  <Router>
    <App />
  </Router>
), document.getElementById('root'))