How to work with Routes for each tabs ?

[ryuran]

Hello,

I use this module and I need to have a route (react-router-dom) for each tabs.

How to do it ?

[pavinduLakshan]

Didn't test but this will probably work.

First, define a route pointing to the page where the tabs are.

<Route path="/auth/:tab" component={<Auth} />

auth.js

function Auth(props){
    const {tab} = props.match.params.tab;
    return (
        <Tabs
      defaultTab={tab}
      onChange={tabId => {
        props.history.push('/auth/'+tabId)
      }}
    >
      <TabList>
        <Tab tabFor="one" style={{ width: "50%" }}>
          Login
        </Tab>
        <Tab tabFor="two" style={{ width: "50%" }}>
          Register
        </Tab>
      </TabList>
      <TabPanel
        tabId="one"

      >
           Tab 1
      </TabPanel>
      <TabPanel
        tabId="two"
      >
        Tab 2
      </TabPanel>
    </Tabs>  
    )
}

/auth/one will point to tab "one" while /auth/two will point to tab "two"