T
TanStack•11mo ago
eastern-cyan

Conditional rendering under single route

Hey, Assume I want to have 2+ conditional "screens" rendered per route, is there a more concise way of doing it? My naive solution is something like 
export const Route = createLazyFileRoute('/')({
  component: () => {
    const someCondition = false
    return someCondition ? <Index /> : <IndexAlt />
  },
})
export const Route = createLazyFileRoute('/')({
  component: () => {
    const someCondition = false
    return someCondition ? <Index /> : <IndexAlt />
  },
})
Could I use something like route masking for this? What are the alternatives?
2 Replies
foreign-sapphire
foreign-sapphire•11mo ago
"concise" in which way? what don't you like about your solution?
flat-fuchsia
flat-fuchsia•11mo ago
I'd say, if you can make them separate routes. If that's really not an option I'd do it as you've shown for switching between 2 components, if you have more use a lookup object or a switch statement

Did you find this page helpful?