Routes declaration convention

I've seen the examples with

0.0.1-beta.25

0.0.1-beta.25

Is this the recommended pattern?
1. Create a new route config object with

createRouteConfig

createRouteConfig

2. Create new children objects using root object with

.createRoute

.createRoute

3. Create a new object and add child routes using

.addChildren

.addChildren

This is my take

const _root = createRouteConfig()
const index = _root.createRoute({ path: '/' })

const _dashboard = _root.createRoute({ path: 'dashboard' })
const dashboardIndex = _dashboard.createRoute({ path: '/' })

const _invoices = _dashboard.createRoute({ path: 'invoices' })
const invoicesIndex = _invoices.createRoute({ path: '/' })
const invoice = _invoices.createRoute({ path: ':invoiceId' })
const invoices = _invoices.addChildren([invoicesIndex, invoice])

const _users = _dashboard.createRoute({ path: 'users' })
const usersIndex = _users.createRoute({ path: '/' })
const user = _users.createRoute({ path: ':userId' })
const users = _users.addChildren([usersIndex, user])

const dashboard = _dashboard.addChildren([dashboardIndex, invoices, users])

const root = _root.addChildren([index, dashboard])

export const router = createReactRouter({
  routeConfig: root,
})

const _root = createRouteConfig()
const index = _root.createRoute({ path: '/' })

const _dashboard = _root.createRoute({ path: 'dashboard' })
const dashboardIndex = _dashboard.createRoute({ path: '/' })

const _invoices = _dashboard.createRoute({ path: 'invoices' })
const invoicesIndex = _invoices.createRoute({ path: '/' })
const invoice = _invoices.createRoute({ path: ':invoiceId' })
const invoices = _invoices.addChildren([invoicesIndex, invoice])

const _users = _dashboard.createRoute({ path: 'users' })
const usersIndex = _users.createRoute({ path: '/' })
const user = _users.createRoute({ path: ':userId' })
const users = _users.addChildren([usersIndex, user])

const dashboard = _dashboard.addChildren([dashboardIndex, invoices, users])

const root = _root.addChildren([index, dashboard])

export const router = createReactRouter({
  routeConfig: root,
})

I like it, but don't love it
I'm no expert, but is a mutable object a viable alternative to creating new objects?
I don't like that if I create a route, I need to remember to add it as a child to my parent route.
Either way I'm loving the library

TanStack•4y ago•

7 replies

colourful-plum

Routes declaration convention

I've seen the examples with

0.0.1-beta.25

0.0.1-beta.25

Is this the recommended pattern?
1. Create a new route config object with

createRouteConfig

createRouteConfig

2. Create new children objects using root object with

.createRoute

.createRoute

3. Create a new object and add child routes using

.addChildren

.addChildren

This is my take

const _root = createRouteConfig()
const index = _root.createRoute({ path: '/' })

const _dashboard = _root.createRoute({ path: 'dashboard' })
const dashboardIndex = _dashboard.createRoute({ path: '/' })

const _invoices = _dashboard.createRoute({ path: 'invoices' })
const invoicesIndex = _invoices.createRoute({ path: '/' })
const invoice = _invoices.createRoute({ path: ':invoiceId' })
const invoices = _invoices.addChildren([invoicesIndex, invoice])

const _users = _dashboard.createRoute({ path: 'users' })
const usersIndex = _users.createRoute({ path: '/' })
const user = _users.createRoute({ path: ':userId' })
const users = _users.addChildren([usersIndex, user])

const dashboard = _dashboard.addChildren([dashboardIndex, invoices, users])

const root = _root.addChildren([index, dashboard])

export const router = createReactRouter({
  routeConfig: root,
})

const _root = createRouteConfig()
const index = _root.createRoute({ path: '/' })

const _dashboard = _root.createRoute({ path: 'dashboard' })
const dashboardIndex = _dashboard.createRoute({ path: '/' })

const _invoices = _dashboard.createRoute({ path: 'invoices' })
const invoicesIndex = _invoices.createRoute({ path: '/' })
const invoice = _invoices.createRoute({ path: ':invoiceId' })
const invoices = _invoices.addChildren([invoicesIndex, invoice])

const _users = _dashboard.createRoute({ path: 'users' })
const usersIndex = _users.createRoute({ path: '/' })
const user = _users.createRoute({ path: ':userId' })
const users = _users.addChildren([usersIndex, user])

const dashboard = _dashboard.addChildren([dashboardIndex, invoices, users])

const root = _root.addChildren([index, dashboard])

export const router = createReactRouter({
  routeConfig: root,
})

Routes declaration convention

Similar Threads

Routes declaration convention

Similar Threads

Similar Threads

Similar Threads