T
TanStack•4y ago
genetic-orange

Routes declaration convention

I've seen the examples with 0.0.1-beta.25 Is this the recommended pattern? 1. Create a new route config object with createRouteConfig 2. Create new children objects using root object with .createRoute 3. Create a new object and add child routes using .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 😃
2 Replies
rival-black
rival-black•4y ago
that does seem to be the convention since the basic example was redone in that style
foreign-sapphire
foreign-sapphire•4y ago
This is the convention While the "simpler" convention we had before was cleaner looking in the examples, it didn't scale at all to larger apps Once you start doing larger apps, your route defs need to be split up And likewise you need to reassemble them into their tree in a shared file Consider it an investment into the medium/long term of your app. In fact, take a peek at the larger kitchen-sink-codesplit example and I think you'll understand the motivations more.

Did you find this page helpful?