How to create an intermediary for loading a react component?

Question

React

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>

      )
  }

}

when mounting each component, you need to execute a certain piece of code, for this I want to wrap each page in the loadableComponent
function , it should turn out like this:

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

here is the loadableComponent function itself

import React from "react";
import Page from './Page';

const loadableComponent = (Component) => (

   <Page main={'Component'} />

)

export default loadableComponent;

after I passed the component to the function, uh, I need to throw it into the template for the Page component

import React, {Component} from 'react';

export default class Page extends Component {

  constructor(props) {

    super(props);

    console.log('test calculate')

  }

  render() {

    return (<div>{this.props.main}</div>);
  }
}