Routable tabs have an inconsistent handling of props.
If I navigate to a tab from one of the sibling tabs I get different props than when I navigate to a tab from somewhere else.
Is this a bug?
Using React.
I have the following routes:
{
path: '/route-tabs/:id/tabs/',
component: TabsRoutablePage,
options: {
props: {
prop_parent: 'a'
}
},
tabs: [
{
path: '/',
id: 'tab1',
component: TabContent1,
options: {
props: {
prop_tab1: '1'
}
},
},
{
path: '/tab2/',
id: 'tab2',
component: TabContent2,
options: {
props: {
prop_tab2: '2'
}
},
}]
},
So I have the following props:
- id from route params,
- prop_parent from tab parent page route,
- and prop_tab1 / prop_tab2 from tab page routes.
My expectation is as follows:
If I navigate from somewhere other than the tabs pages to one of the tabs, no matter which tab it is, I will get properties as follows:
- TabsRoutablePage: id, prop_parent
- TabContent1: id, prop_parent, prop_tab_1
- TabContent2: id, prop_parent, prop_tab_2
That does not happen. This is what happens:
- TabsRoutablePage: id, prop_parent.
- TabContent1 and TabContent2: If it is the first tab navigated to from outside the tabs it ONLY has id. It does not have prop_parent and prop_tab_1/prop_tab_2. If it is navigated to from one of the tab pages it has id and prop_parent, but not prop_tab_1/prop_tab_2.
Therefore:
- The parent tab page is passed the correct properties from the path.
- The tab pages are not passed the props set on the parent path when navigating to it from somewhere else.
- The tab pages are passed the props set on the parent path when navigating to it from one of the tab pages.
This is inconsisent. If I navigate to a tab from one of the sibling tabs I get different props than when I navigate to a tab from somewhere else.
In addition, I would expect to get passed the props that are set on the tab page routes, but they do not get passed at all.