How do you know in React that a component has mounted?

Question

JavaScript

There is a code:

import React, {Component} from 'react';
import {Route, Switch} from 'react-router-dom';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import ContentIndex from '../pages/ContentIndex';
import Catalog from '../pages/Catalog';

class Root extends Component {
  
  render(){
      return(
      <div className="all-data">
      <Switch>

        <Route
        exact
        path={"/"}
        component={ContentIndex}
        />

        <Route
        path={'/catalog'
        component={Catalog}
        />
              
              </Switch>
       </div>

      )
  }

}

I don’t know how to implement the template so that when the url is navigated, the spinner is loaded and, as soon as the component is mounted, hide the spinner.
The expected result is like here - https://nguyenbathanh.github.io

Answer 1

The ComponentDidMount method fires when the component is mounted. Full info on React lifecycle methods here .