Material-ui: Can't seem to integrate the Tabs Component and React Router to change url.

[davidfufu]

Just as a preface, I have checked stackoverlow's material UI section.

I'm having trouble integrating React routing's Link Tag with Material UI Tabs.

I've tried putting the Link in the Tab. The result is that there are no errors, but upon clicking the Tabs, the url does not change.

<Tabs
          value={this.state.value}
          onChange={this.handleChange}
          indicatorColor="primary"
          textColor="primary"
          centered
        >

          <Tab className={classes.tabby}label="Facebook" >
                    <Link to='/Facebook'>Facebook</Link>
          </Tab>
          <Tab className={classes.tabby}label="LinkedIn" >
                    <Link to='/LinkedIn'>LinkedIn</Link>
          </Tab>
          <Tab className={classes.tabby}label="Twitter" >
                    <Link to='/Twitter'>Twitter</Link>
          </Tab>
</Tabs>

I've also tried passing the Link in using the children property. This doesn't change the url either, nor does cause any errors.

          <Tab className={classes.tabby}label="Facebook" children={<Link to="/Facebook" />}></Tab>
          <Tab className={classes.tabby}label="LinkedIn" children={<Link to="/LinkedIn" />}/>
          <Tab className={classes.tabby}label="Twitter" children={<Link to="/Twitter" />}/>

Finally wrapping Tab in Link as given below breaks the tab bar component and returns an error of:

<Link to='/Facebook'>Facebook
              <Tab className={classes.tabby}label="Facebook" />
</Link>

warning.js:36 Warning: Unknown props `fullWidth`, `textColor` on <a> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in a (created by Link)
    in Link (created by PlatformTabs)
"material-ui": "^1.0.0-beta.10",
"material-ui-icons": "^1.0.0-beta.5",
"react": "^15.6.1",
"react-dom": "^15.6.1",
Chrome: Version 61.0.3163.79 (Official Build) (64-bit)
"react-router-dom": "^4.2.2",

[oliviertassinari]

Do something like:

<Tab label="Facebook" component={Link} to="/facebook" />

[davidfufu]

Current Tab and Link Code:

//PLATFORMTABS.JS
<Tabs
          value={this.state.value}
          onChange={this.handleChange}
          indicatorColor="primary"
          textColor="primary"
          centered
        >

          <Tab className={classes.tabby} label="Facebook" component={Link} to="/Facebook" />

          <Tab className={classes.tabby} label="LinkedIn" component={Link} to="/LinkedIn"/>
          <Tab className={classes.tabby} label="Twitter" component={Link} to="/Twitter"/>
        </Tabs>

My route code looks like this.

return(
            <div style={styles.background}>
                <div style={styles.dayContainer}>
                    <TopBar/>
                    <PlatformTabs/>
                    <Switch>
                        <Route path='/Facebook' component={FacebookPosts}/>
                        <Route path='/LinkedIn' component={LinkedInPosts}/>
                        <Route path='/Twitter' component={TwitterPosts}/>
                    </Switch>
                    <SimpleLineChart/>
                </div>
            </div>

        )

But, once I load the page, this error shows up.

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `Route`.
    in Route (created by PostVisual)
    in Switch (created by PostVisual)
    in div (created by PostVisual)
    in div (created by PostVisual)
    in PostVisual (created by App)
    in div (created by App)
    in App
    in Router (created by BrowserRouter)
    in BrowserRouter
    in AppContainer
    in div

My components that the routes are supposed to render are not there either and if I click any tab, this error is given.

ReactCompositeComponent.js:744 Uncaught TypeError: Cannot read property '_currentElement' of null
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:744)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:723)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:644)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:546)
    at Object.receiveComponent (ReactReconciler.js:124)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:753)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:723)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:644)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:546)
    at Object.receiveComponent (ReactReconciler.js:124)

[davidfufu]

Nevermind, I changed how I was importing and it's working. Thanks!

[ksaitor]

@davidfufu perhaps you could elaborate how you fixed this?

[davidfufu]

I believe I switched to "export default Component". Before, I was using multiple defaults from one file and destructuring them when importing like "import { Component1, Component2}".

[evalcraciun]

<Tab label="Facebook" component={Link} to="/facebook" />, from material UI doesn't have property to

[oliviertassinari]

@evalcraciun Link has a to property.

[129emma]

I got this error message

Type 'typeof Link' is not assignable to type '"object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | ... 96 more ... | undefined'.   Type 'typeof Link' is not assignable to type 'ComponentClass'.     Types of parameters 'props' and 'props' are incompatible.       Property 'to' is missing in type 'ButtonBaseProps' but required in type 'Readonly'.

[oliviertassinari]

@129emma #14170

[EduardOrdukhanov]

This method makes it so that when a tab is pressed, the link hover text stays visible at the bottom of the page until you click elsewhere or select a different tab.

[lcswillems]

What about Next.js Link component? It doesn't have a to property but a href one.

How could I add a link to a tab using the Next.js Link component?

Edit:
@oliviertassinari , the solution you propose (i.e. <Tab label="Facebook" component={Link} to="/facebook" />) doesn't seem to work anymore. The doc mentions a "component prop" (here that doesn't exist anymore).

[oliviertassinari]

This solution should still be valid: https://material-ui.com/guides/composition/#routing-libraries

[lcswillems]

Thank you for the answer!