I use this component here all very cool and beautiful, but instead of displaying nested blocks, I want to implement routing using react-router when clicking on a tab. If I just wrap the tab in the Link tag, then the styles disappear, but I don’t want it. How to achieve beautiful routing using tabs?

Here in this code, link styles overwrite tab styles, but I don’t want to.

import React from 'react'; import {Tabs, Tab} from 'material-ui/Tabs'; import SwipeableViews from 'react-swipeable-views'; import {Link, IndexLink} from 'react-router'; import CommonStyles from './CommonStyles'; class TabMenu extends React.Component { constructor(props) { super(props); this.state = { slideIndex: 0, }; } render() { return ( <div> <Tabs onChange={this.handleChange} value={this.state.slideIndex} > <Link to="/"> <Tab label="Main" style={styles.slide} value={0} /> </Link> <Tab label="Tests" style={styles.slide} value={1} /> <Tab label="Videos" style={styles.slide} value={2} /> </Tabs> </div> ); } } export default TabMenu;
  • Maybe the router allows you to reset the route manually? In this case, you can simply hang up onClick on the tab and manually activate the route, without the need to use the Link component. - Michael Radionov
  • @MichaelRadionov I, too, immediately had such a thought, but until this second I could not find its confirmation in the documentation and source code. Experience is not enough. - Razzwan

1 answer 1

A router object is available in the react-router in the context ...

 class TabMenu extends React.Component { static contextTypes = { router: React.PropTypes.object, }; handleClick(...) { // тут нужно смотреть, что приходит после onChange tabs... this.context.router.push({ pathname: '/users/12', query: { tab: 'hello' }, }); } render() { return <Tabs onChange={this.handleChange}>...</Tabs>; } }

Here you can look at what you can do with router ... https://github.com/reactjs/react-router/blob/master/docs/API.md#contextrouter

  • I have your code breaks the build. How to write the same thing using ecmascript 6? - Razzwan