replaced createRoutes with createRoute

[stackoverfloweth]

Throughout the life of Kitbag Router, we have evolved our syntax for defining routes many times. We went from something very similar to vue-router to our own flattened structure of createRoutes which offered considerable performance improvements. Yet again we think we have found a better syntax.

By defining the route individually, we capture generics for every piece of the route that we can use to build the best possible dx. This means we can tailor the options for a route more specifically. It also feels like it greatly simplified our internal types.

Defining routes individually means we flip the way you declare relationships of nested routes. Instead of declaring children, which is an array of routes, you instead create the parent first and pass parent into your child routes.

└── user
    └── profile
    └── settings
        └── keys
        └── notifications

const user = createRoute({
  name: 'user',
  path: '/user',
  component: ...,
})

const profile = createRoute({
  parent: user,
  name: 'profile',
  path: '/profile',
  component: ...,
})

const settings = createRoute({
  parent: user,
  name: 'settings',
  path: '/settings',
  component: ...,
})

const settingsKeys = createRoute({ 
  parent: settings,
  name: 'keys', 
  path: '/keys', 
  component: ... 
})

const settingsNotifications = createRoute({ 
  parent: settings,
  name: 'notifications', 
  path: '/notifications', 
  component: ... 
})

[netlify[bot]]

✅ Deploy Preview for kitbag-router ready!

Name	Link
🔨 Latest commit	80a32685d63b0f3cb9a281f1c3b73c96a5772d14
🔍 Latest deploy log	https://app.netlify.com/sites/kitbag-router/deploys/66a1ca52a65cb100087769f6
😎 Deploy Preview	https://deploy-preview-230--kitbag-router.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.