solid-named-router

Solid Named Router

A third party router library for solidjs. Includes named routes inspired by vuejs.
This router relies on the route-parser package.
Note: This library is not complete. Please contribute and submit PRs to improve this library 💖

Quick start

Install it:

npm i solid-named-router

Wrap your root component with the Router component:

import { render } from "solid-js/web";
import { createRouter } from "solid-named-router";
import App from "./App";

const Router = createRouter({
  routes: [
    {
      name: 'Home',
      path: '/',
      element: () => <div>Home</div>
    },
    {
      name: 'Users',
      path: '/users/:userId',
      element: () => <div>Users</div>
    },
  ]
});

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById("app")
);

Now add the RouterView component to display the current route.

import {RouterView, Link} from "solid-named-router";

const App = () => {
  return (
    <>
      <RouterView/>
    </>
  );
};

Methods & Hooks

Link

<Link to={{name: 'Users', params: {userId: 1234}, query: {hideInfo: "1"}}}>User</Link>
<Link to='app/users/1234'>User</Link>

navigate

navigate({name: 'Users', params: {userId: 1234}, query: {hideInfo: "1"}})
navigate('app/users/1234')

useNamedRoute

const namedRoute = useNamedRoute(); // -> {name, params, pathname, query};

<div>
  <div>name: {namedRoute.name}</div>
  <div>params: {namedRoute.params.userId}</div>
  <div>params: {namedRoute.pathname}</div>
</div>

useParams

const params = useParams(); // -> {userId};

<div>
  <div>name: {params.userId}</div>
</div>

Outlet Example

const Router = createRouter({
  routes: [
    {
      name: 'Users',
      path: '/users/:userId',
      elements: {
        drawer: () => <div>Drawer Here</div>,
        content: () => <div>Content Here</div>
      },
      element: () => (
        <div>
          <Outlet name="drawer">
          <Outlet name="content">
        </div>
      ),
    },
  ]
});