search

tleunen / react-mdl

React Components for Material Design Lite
https://tleunen.github.io/react-mdl/
MIT License
1.76k stars 255 forks source link

react-router's Link only works on Tabs, not HeaderTabs #392

Open igorsantos07 opened 8 years ago

igorsantos07 commented 8 years ago

I think this is a follow-up to #355: while using the Tabs component do work, HeaderTabs still fire that MDL error about being unable to find the element related to my link...

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Element': '#/' is not a valid selector.

Sample code:

<HeaderTabs ripple activeTab={this.state.active} onChange={id => this.setState({ active: id })}>
        <Tab component={Link} to="/">Test</Tab>
</HeaderTabs>

If I change that into <Tabs> the link will work, but the style will get broken as that's inside a <Header>

tleunen commented 8 years ago

With the last version of react-mdl, you should not have the error on the querySelector anymore. But you'll have to use our monkey patched version of the MDL lib by using the file located under /extra.

igorsantos07 commented 8 years ago

Sorry, that error I showed was probably caused by outdated dependencies on my travel notebook. However, the issue described on the title is real: Links only work on Tabs, not HeaderTabs.

I created a JSBin (based off React-router's) that reproduces the issue. You can notice Tabs change the page content, while HeaderTabs doesn't - you can remove any of them, it's not a conflict between the components.

tleunen commented 8 years ago

Thanks for the jsbin, I'll take a look.

pghalliday commented 7 years ago

I also noticed in my own code and in the posted jsbin that the regular tabs don't underline or highlight the active tab - is that another error?

igorsantos07 commented 7 years ago

I think that's #394, @pghalliday :)

noel-gonzales commented 7 years ago

@igorsantos07 I am seeing this problem with react-router Links not working in HeaderTabs or regular Tabs. Neither seem to load the page content in your JSBin example. I am experiencing this in my own project as well with the latest version. Was there a change since you opened this?

Carpetfizz commented 7 years ago

I'm getting the following error with the latest react-router and react-mdl

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.