How to use the react-universal-component function in react-universal-component

setHasBabelPlugin()

const universalOptions = {
  loading: () => null,
  error: props => {
    console.error(props.error);
    return <div>An error occurred loading this page's template. More information is available in the console.</div>;
  },
}

  const t_0 = universal(import('../../src/site/pages/Home'), universalOptions)
const t_1 = universal(import('../../src/site/pages/Terms'), universalOptions)
const t_2 = universal(import('../../src/site/pages/Privacy'), universalOptions)
const t_3 = universal(import('../../src/site/pages/Pricing'), universalOptions)
const t_4 = universal(import('../../src/site/pages/404'), universalOptions)


// Template Map
global.componentsByTemplateID = global.componentsByTemplateID || [
  t_0,
t_1,
t_2,
t_3,
t_4
]

// Template Tree
global.templateIDsByPath = global.templateIDsByPath || {
  '404': 4

// @flow

import universal from 'react-universal-component';
import { withPreloading } from 'react-preload-universal-component';

export default withPreloading(universal(import('ArticleOverview/component')));

// @flow

import universal from 'react-universal-component';
import { withPreloading } from 'react-preload-universal-component';

export default withPreloading(universal(import('SplatRouter/component')));

// @flow
import React from 'react';
import { graphql } from 'react-apollo';
import universal from 'react-universal-component';
import ARTICLES_FOR_TAG from '../gql/articlesForTag.graphql';
import type { ArticlesType, MatchParams } from '../../../types/boldr';

const UniversalTagList = universal(import('./TagList'));

type Props = {
  loading: boolean,
  error?: Object,
  getArticlesForTag: ArticlesType,
  match: MatchParams,
};

const TagList = ({ loading, error, match, getArticlesForTag }: Props) => (
  
);

// $FlowIssue
export default graphql(ARTICLES_FOR_TAG, {
  options: props => ({
    variables: {

* knowledge of the CeCILL license and that you accept its terms.
 */

import React from 'react';
import universal from 'react-universal-component';
import {injectReducer} from 'redux-injector';
import {injectSaga} from 'redux-sagas-injector';
import PulseLoader from '../common/components/presentation/loaders/pulseLoader';
import {connect} from 'react-redux';

import localStorage from '../../../../common/localStorage';

import theme from '../../../css/variables';

// second way with onLoad
const Universal = universal(import('./preload'), {
    loading: <div>Loading notebook...</div>,
    onLoad: (module) =&gt; {
        injectSaga('notebook', module.notebookSagas);
        injectReducer('notebook', module.notebookReducer);
        injectReducer('settings', module.settingsReducer(localStorage));

        // Configure hot module replacement for the reducer
        if (process.env.NODE_ENV !== 'production') {
            if (module.hot) {
                module.hot.accept('./reducers/index', () =&gt; import('./reducers/index').then((module) =&gt; {
                    injectReducer('notebook', module.default);
                }));

                module.hot.accept('../settings/reducer', () =&gt; import('../settings/reducer').then((module) =&gt; {
                    injectReducer('settings', module.default(localStorage));
                }));

// @flow
import * as React from 'react';
import { graphql } from 'react-apollo';
import universal from 'react-universal-component';
import type { ProfileType } from '../../types/boldr';
import PROFILE_QUERY from './gql/userProfile.graphql';

const UniversalProfile = universal(import('./Profile'));

type Props = {
  loading: boolean,
  error?: Object,
  profile: ProfileType,
};

const Profile = ({ loading, error, profile }: Props) => (
  
);

// $FlowIssue
export default graphql(PROFILE_QUERY, {
  options: props => ({
    variables: {
      username: props.match.params.username,

}
> = universal(import('./pages/Dashboards/Index'), uniOpts)
const JobRunsIndex: UniversalComponent<
  Pick<
    {
      classes: any
    },
    never
  > & {
    pagePath: string
  }
> = universal(import('./pages/JobRuns/Index'), uniOpts)
const JobsIndex = universal(import('./pages/JobsIndex/JobsIndex'), uniOpts)
const JobsShow = universal(import('./pages/Jobs/Show'), uniOpts)
const JobsNew = universal(import('./pages/Jobs/New'), uniOpts)
const BridgesIndex = universal(import('./pages/Bridges/Index'), uniOpts)
const BridgesNew = universal(import('./pages/Bridges/New'), uniOpts)
const BridgesShow = universal(import('./pages/Bridges/Show'), uniOpts)
const BridgesEdit = universal(import('./pages/Bridges/Edit'), uniOpts)
const JobRunsShowOverview = universal(import('./pages/Jobs/Runs/Show'), uniOpts)
const TransactionsIndex = universal(
  import('./pages/Transactions/Index'),
  uniOpts,
)
const TransactionsShow = universal(import('./pages/Transactions/Show'), uniOpts)
const Configuration = universal(import('./pages/Configuration/Index'), uniOpts)
const NotFound = universal(import('./pages/NotFound'), uniOpts)
const KeysIndex = universal(import('./pages/Keys/Index'), uniOpts)

const styles = (theme: Theme) => {
  return {
    content: {

recentJobRunsCount: number
      recentlyCreatedPageSize: number
    }
> = universal(import('./pages/Dashboards/Index'), uniOpts)
const JobRunsIndex: UniversalComponent<
  Pick<
    {
      classes: any
    },
    never
  > & {
    pagePath: string
  }
> = universal(import('./pages/JobRuns/Index'), uniOpts)
const JobsIndex = universal(import('./pages/JobsIndex/JobsIndex'), uniOpts)
const JobsShow = universal(import('./pages/Jobs/Show'), uniOpts)
const JobsNew = universal(import('./pages/Jobs/New'), uniOpts)
const BridgesIndex = universal(import('./pages/Bridges/Index'), uniOpts)
const BridgesNew = universal(import('./pages/Bridges/New'), uniOpts)
const BridgesShow = universal(import('./pages/Bridges/Show'), uniOpts)
const BridgesEdit = universal(import('./pages/Bridges/Edit'), uniOpts)
const JobRunsShowOverview = universal(import('./pages/Jobs/Runs/Show'), uniOpts)
const TransactionsIndex = universal(
  import('./pages/Transactions/Index'),
  uniOpts,
)
const TransactionsShow = universal(import('./pages/Transactions/Show'), uniOpts)
const Configuration = universal(import('./pages/Configuration/Index'), uniOpts)
const NotFound = universal(import('./pages/NotFound'), uniOpts)
const KeysIndex = universal(import('./pages/Keys/Index'), uniOpts)

const styles = (theme: Theme) => {

ROUTE_REDUX_DEMO,
  ROUTE_USERS,
  ROUTE_USER_DETAIL,
  ROUTE_USER_DETAIL_TAB,
  ROUTE_ADMIN_USERS,
} from 'redux/routesMap';


const options = {
  minDelay: 300,
  loading: Loading,
};
const HomePage = universal(import('pages/Home/Home'), options);
const LoginPage = universal(import('pages/Login/Login'), options);
const SignupPage = universal(import('pages/Signup/Signup'), options);
const NotFoundPage = universal(import('pages/NotFound/NotFound'), options);
const ReduxDemoPage = universal(import('pages/ReduxDemo/ReduxDemo'), options);
const UsersListPage = universal(import('pages/UsersList/UsersList'), options);
const UserDetailPage = universal(import('pages/UserDetail/UserDetail'), options);

const actionToPage = {
  [ROUTE_HOME]: HomePage,
  [ROUTE_LOGIN]: LoginPage,
  [ROUTE_SIGNUP]: SignupPage,
  [ROUTE_REDUX_DEMO]: ReduxDemoPage,
  [ROUTE_USERS]: UsersListPage,
  [ROUTE_USER_DETAIL]: UserDetailPage,
  [ROUTE_USER_DETAIL_TAB]: UserDetailPage,
  [ROUTE_ADMIN_USERS]: UsersListPage,
  [NOT_FOUND]: NotFoundPage,
};
const getPageFromRoute = ( routeAction ) => {

import React from 'react'
import universal from 'react-universal-component'

const UniversalTab = universal(({ tab }) => import(`./${tab}`))

export default class App extends React.Component {
  state = { selected: 'Home' }

  render() {
    return (
      <div>
        

        <button>
            this.setState({ selected: 'Home' }) }&gt;
          Home
        </button>
        <button>
            this.setState({ selected: 'Foo' }) }
                onMouseEnter={ () =&gt;</button></div>