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

should be 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 when I passed the function to the component, 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>); } }

but for some reason this scheme does not work

  • <Page main={'Component'} /> here, quotes are not needed, correct to <Page main={Component} /> - Alexandr Tovmach

0