есть код:
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>
)
}
}
при монтировании каждой компоненты нужно выполнять определенный кусок кода, для этого хочу обернуть каждую страницу в функцию
loadableComponent
должно получиться так :
<Route
exact
path={"/"}
component={loadableComponent( ContentIndex )}
/>
вот сама функция loadableComponent
import React from "react";
import Page from './Page';
const loadableComponent = (Component) => (
<Page main={'Component'} />
)
export default loadableComponent;
после того, когда я передал в функцию компоненту ээ нужно прокинуть в шаблон для компонент Page
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>);
}
}
Простой
