Material Tabs that control Router 4

MaterialTabsRouter4

import React from 'react';
import {Tabs, Tab} from 'material-ui/Tabs';
import Slider from 'material-ui/Slider';
import { withRouter } from 'react-router';
import { BrowserRouter as Router, Route, withRouter } from 'react-router-dom'

class TabsRouter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabSelected: 'one',
    };
   this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (tabSelected) => {
    this.setState({
      tabSelected: tabSelected,
    });
   this.props.history.push(tabSelected);
  };

  render() {

    return (
      <Tabs
        value={this.state.tabSelected}
        onChange={this.handleChange}
      >
        <Tab label="Item One" value="one">
          Tab Content 1
        </Tab>
        <Tab label="Item Two" value="two">
          Tab Content 2
        </Tab>
        <Tab label="Item Two" value="three">
          Tab Content 3
        </Tab>
      </Tabs>
    )
};

export default withRouter(TabsRouter);

"history": "^4.7.2",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router-dom": "^4.1.1",
"react-tap-event-plugin": "^2.0.1"

 "[email protected]",

I would like to add the case when your content is rendered conditionally depending on the path (I mean using something as react-router's "Route" component), usually the first time the tabs component gets rendered, you should append the active tab value to location.pathname in order for the route to match, e.g.

1. Suppose we click a link to /tabs
2. and this component gets rendered

<Tabs value={this.state.tabSelected} onChange={this.handleChange}>
    <Tab label="Item One" value="one">
       <Route path={`${match.url}/one`}  render = {() => <div>Tab Content 1</div>}/>
    </Tab>
    <Tab label="Item Two" value="two">
       <Route path={`${match.url}/two`}  render = {() => <div>Tab Content 2</div>}/>
    </Tab>
    <Tab label="Item Two" value="three">
      <Route path={`${match.url}/three`}  render = {() => <div>Tab Content 3</div>}/>
    </Tab>
</Tabs>

3. The initially selected tab is actually active but the content was not rendered because we must append the selected tab value to the path (/tabs)

The problem is onChange does not fires in the first render, so the path could not be updated with the active tab value.
Maybe there is an easier solution, or I'm seeing a problem where there is any, but I solve implementing componentWillReceiveProps like this:

componentWillReceiveProps(nextProps) {
  const nextPath = nextProps.location.pathname
  // call onChange when path exactly matches /tabs
  if(/^\/tabs$/.test(nextPath))
    this.onChange(nextProps.tabSelected)
}

Oh! and also it's important to set tabSelected state on push, so we could navigate <- . ->

handleChange = (tabSelected) => {
    this.setState({
      tabSelected: tabSelected,
    });
   this.props.history.push({
     pathname: path.join(this.props.match.url, tabSelected),
     state: { tabSelected }
   });
  };

And finally a reducer for LOCATION_CHANGE action types which sets the state stored for every path

(state, { type, payload: location }) => {
  if( type === LOCATION_CHANGE ) {
    return {
      ...state,
      ...location.state
    }
  }
  return state
}