Materialize Tabs not working using React Router

Question

I am trying to understand why Materialize tabs won't work when I am using react router.

I have 3 options on the navigation bar that will open their respective pages: "Hotels", "Statistics" and "Academy". Each of these sections has tabs inside them.

Inside Hotels, I have 3 materialize tabs: Gen Info, Staff, Content and on the other pages I also have materialized tabs.

They work perfectly when used outside react router. This is the code:

class App extends Component {

render() {
return (
  <div className="App">
    <Navbar/>
    <div className="body-extranet">
      <Header/> 

      <Switch>
        <Route path="/hotels" render={() => (
          <PageHotel tab={"Hoteis"}/>
        )}>
        </Route>
        <Route path="/statistics/" render={() => (
          <PageStatistics tab={"Statistics"}/>
        )}>
        </Route>
        <Route path="/academy/" render={() => (
          <PageAcademy tab={"Academy"}/>
        )}>
        </Route>
      </Switch>
    </div>
  </div>
  );
 }
}

export default App;

Inside PageHotel Component, for instance, I have the materialize tab

class PageHotel extends Component {

render() {
const { hotel, tab } = this.props;

return (
  <div className="page">
    <div className="subheader-tabs">
      <div class="row">
        <div class="col s12">
          <ul class="tabs">
            <li class="tab col"><a href="#info">General Info</a></li>
            <li class="tab col"><a href="#staff">Staff</a></li>
            <li class="tab col"><a href="#content">Content</a></li>
          </ul>
          <div className="divider"></div>
        </div>
        <div id="info" class="col s12">
          <div className="container">
            <Form></Form>
          </div>
        </div>
        <div id="staff" class="col s12">
            <Staff></Staff>
        </div>
        <div id="content" class="col s12">

        </div>
      </div>
    </div>
  </div>
);
}}

When I click on hotels on the navbar the materialize tab is not even started and the contents of all tabs are spread on a single page. I have to reload the page once to get it to work properly.

I tried using react-materialize and it started to work, However, I ran into other problem. One of them tabs has a controlled form which updates redux store once the local state is changed. However, whenever I write something inside the form the form reloads and I am not able to write anything.

Does anyone know why this is happening?

Answer 1

That becouse de materialize-js file is just being loaded at page loading and when you use react-routes the page isn't being loaded so the file can't initialize it and the tabs are broken. you must implement something like this:

Materialize-css With React, Initializing components using React Lifecycle method