React - Routable Tabs Content vs Component

Questions
1

Hi, how can I use a React component inside a routable tab?

The fiddle below demonstrates the behaviour between content vs component which is not as expected.

https://jsfiddle.net/edwin_nel/v5w6y08c/

Thank you.

2 
const PageTab_1 = () => (
  <Block strong>
    <p>Here is PageTab_1!</p>
    <p>You can go <Link back>back</Link>.</p>      
  </Block>
)
1 Like
3

Thank you for responding.

@plpl removed the Page component. How will I then implement Pull To Refresh?

<Page ptr onPtrRefresh={this.loadMore.bind(this)}>
...
</Page>
4 
<Page pageContent={false}>
<Tab className="page-content ptr-content" id="tab1"></Tab>


const TabsRoutable = () => (
  <Page pageContent={false}>
    <Navbar title="Tabs Routable" backLink="Back"></Navbar>
    <Toolbar bottom tabbar>
      <Link tabLink href="./" routeTabId="tab1">Tab 1</Link>
      <Link tabLink href="tab2/" routeTabId="tab2">Tab 2</Link>
      <Link tabLink href="tab3/" routeTabId="tab3">Tab 3</Link>
    </Toolbar>
    <Tabs routable>
      <Tab className="page-content ptr-content" id="tab1"></Tab>
      <Tab className="page-content" id="tab2"></Tab>
      <Tab className="page-content" id="tab3"></Tab>
    </Tabs>
  </Page>
)
5

Thank you @plpl,

<Page pageContent={false}>

fixes the display of the individual tabs, which brings me to my original problem.

There is an error with swipe back.
Uncaught TypeError: Cannot read property ‘route’ of undefined

When clicking on the Back link it works fine, when swipe back, the bottom toolbar stays in place with the main view blank.

image

6 
// PageTab_1 
const PageTab_1 = () => (
  <Block strong>
    <p>Here is PageTab_1!</p>
    <p>You can go <Link back>back</Link>.</p>      
  </Block>
)

// PageTab_2
const PageTab_2 = () => (
  <Block strong>
    <p>Here is PageTab_2!</p>
    <p>You can go <Link back>back</Link>.</p>      
  </Block>
)

// PageTab_3
const PageTab_3 = () => (
  <Block strong>
    <p>Here is PageTab_2!</p>
    <p>You can go <Link back>back</Link>.</p>      
  </Block>
)
7

Hi @plpl, are you suggesting I strip out the <Page … > from all my components if I want to use it in a routable tab?

And any idea why Swipe Back is broken, while clicking on Back Link is working as expected?

8
  1. yes
  2. “Swipe Back” is not broken if your layout is correct
9

Hi @plpl, thank you for the reply.

And I beg your pardon for my poor choice of words, I was merely wondering why the two methods of navigating back to the previous page, is behaving differently.

Thank you.

10

although “back-link” and “swipe-back” will give you the same result => “going-back”,
internally they works different

since your layout is wrong, i’m not considering it as a bug
you must strip out the “<Page … >”

11

I have your similar problem and fixed with some tricks.

Today I found this, which is created by the author of Framework7. He uses Views.

You can give a try