Materialize Tabs not working using React Router - reactjs

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">General Info</li>
<li class="tab col">Staff</li>
<li class="tab col">Content</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