kidkarolis / space-router

Framework agnostic router for single page apps

Space Router

Framework agnostic router for single page apps

Space Router packs all the features you need to keep your app in sync with the url. It's distinct from many other routers in that there is only a single callback. This callback can be used to re-render your applocation, update a store and perform other actions on each url change. Space Router is stateless, it doesn't store the current route leaving state completely up to you to handle.

In summary, Space Router:

• listens to url changes using popstate or hashchange event
• extracts url parameters and parses query strings
• supports nested routes and arbitrary route metadata
• fits into a wide range of application architectures and frameworks
• has no dependencies and weighs less than 2kb

Install

npm i space-router

API

See the API Docs for more details.

space-router's Issues

Add a .match() or similar helper for SSR

Right now I had to do this to extract the route on the server:

router.match = (url) => {
    const result = {}
    router.start((route, data) => {
      result.route = route
      result.data = data
    })
    router.push(url)
    return result
  }

Should just be a simple call, like const { route, data } = router.match(url) or similar.

Child route can't have same route as parent unless its top-level

I'm trying to implement something like this:

['', App, [
  ['/foos', FoosList, [
    ['/foos/:foo', FooContainer, [
      ['/foos/:foo', FooOverview],
      ['/foos/:foo/bar', FooBar],
      ['/foos/:foo/baz', FooBaz]
    ]
  ]
]]

Where:

• FooContainer renders the 'shell' of the view (maybe a tab/header bar at the top)
• FooOverview, Foobar and FooBaz are sub-views of FooContainer
• FooOverview is the 'default' sub-view that gets rendered when you go to /foos/:foo

This doesn't work right now because when router.data() just returns the first route that matches the pattern , which is FooContainer. Which means FooOverview never gets rendered. FooBar and FooBaz work, however, because the pattern is different.

Not sure what the right fix is here. The easiest solution is literally just to .reverse() the route array after flattening it, but it feels kinda messy because there are items in the array that basically never get rendered.

Consider not matching '*'

So that relative links that aren't routable aren't intercepted. But sometimes it's useful if you know you can render 404 page. So consider doing it by returning false in onTransition which would indicate to opt out of handling this route and letting the browser do so. This is kind of an alternative to #6

Don't intercept links with target attribute

They should open in a new tab.

Links on current page to self cause fullpage reload (not intercepted)

Links from current page to current page are not intercepting.

// window.location.pathname = "/channels"
// href = "/channels"
if (window.location.pathname + window.location.search === href.split('#')[0]) return false

router.update would be very handy, for replacing a param or query param

Passing multiple props based on route; not just `children`

From what I understand, space-router passes child-route components as the children prop to the parent route component. It would be useful if we had the option of passing multiple props based on route configuration. One for rendering the main page, say, and one for rendering some controls in the upper right corner.

I'm imagining a syntax like this, though I suspect it wouldn't be compatible with the current API:

const routes = ['', Qfn, [
  ['/p/:propertyId/integrations/:friendlyId', {
    mainPage: QfnOverview,
    controls: QfnOverviewControls
  }],
  // other stuff
]]

* interferes with external links (or external links just don't work)