The lack of development on React router and my need for prefetching queries for React Relay has driven me to this project and I really like what I'm seeing. But I do need some advice (or an example) on how to deal with "nested" routes. I did read the existing issue on this topic but I don't fully understand what is said there: #89
Let's say I have a /about with several tabs: "teams" and "history". Which would the routes /about/teams and about/history respectively. As I understand from the issue above I would need to create "slots" in my About component that can then be filled depending on the route, so something like this:
export const routes = [
{
path: '/about/teams',
name: 'ABOUT_TEAMS',
component: () => <About slot={<AboutTeams/>}/>
},
{
path: '/about/history',
name: 'ABOUT_HISTORY',
component: () => <About slot={<AboutHistory/>}/>
}
]
the problem with this is since component is specified as ()=>
it is re-rendered on every route change. If I instead follow the example the component is not re-rendered but now I can't specify the slot for sub-routes in any way
export const routes = [
{
path: '/about/teams',
name: 'ABOUT_TEAMS',
component: About // now how to specify the "slot" property
},
{
path: '/about/history',
name: 'ABOUT_HISTORY',
component: About
}
]
EDIT: having read #89 again and again I'm starting to think something like this is hinted at:
export const routes = [
{
path: '/about/teams',
name: 'ABOUT_TEAMS',
component: About // now how to specify the "slot" property
slot: <Teams/> // or maybe just 'Teams'
},
{
path: '/about/history',
name: 'ABOUT_HISTORY',
component: About
slot: <History/> // or just 'History'
}
]
but then how to get to that "slot" property in the About component? useRouter
returns access to the matched route but the typescript definition doesn't account for the 'slot' property?