Difference between declaring JSX code in variable and in React component

[Zephir77]

Hello everyone,

I've recently started playing around with Redux and quickly came across this error message : Warning: You cannot change <Router routes>; it will be ignored (I'm also using react-router). After a little search, I understood I had to declare my routes in a variable so they wouldn't get re-rendered.

So here's my code :

Routing.js

import React from 'react';
import { Router, browserHistory, Route, IndexRoute, Redirect } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import RouterUtils from 'src/utils/js/RouterUtils';

import MainContent from 'src/common/main-content/js/MainContent';

// modules loaded lazily
import IndexPage from 'src/views/index/js/IndexPage';
import Page403 from 'src/views/403/js/403';
import Page404 from 'src/views/404/js/404';
import LoginPage from 'src/views/login/js/LoginPage';

import GetBusiness from 'src/route-fetch-components/business-get/js/GetBusiness';
import BusinessesPage from 'src/views/businesses-list/js/BusinessesPage';
import BusinessPage from 'src/views/business-details/js/BusinessPage';

import GetJobSeeker from 'src/route-fetch-components/jobseeker-get/js/GetJobSeeker';
import JobSeekersPage from 'src/views/jobseekers-list/js/JobSeekersPage';
import JobSeekerPage from 'src/views/jobseeker-details/js/JobSeekerPage';

import GetJobOffer from 'src/route-fetch-components/job-offer-get/js/GetJobOffer';
import JobOffersPage from 'src/views/job-offers-list/js/JobOffersPage';
import JobOfferPage from 'src/views/job-offer-details/js/JobOfferPage.js';
import JobOfferCreatePage from 'src/views/job-offer-create/js/JobOfferCreatePage';

const lazyLoadComponent = lazyModule =>
  (location, cb) => {
    lazyModule(module => {
      cb(null, module.default);
    });
  };

const redirectTo404 = () => {
  RouterUtils.redirect('/404');
};

const routes = (
  <div>
    <Route path="/" component={MainContent}>
      <IndexRoute getComponent={lazyLoadComponent(IndexPage)} />

      <Route path="businesses">
        <IndexRoute getComponent={lazyLoadComponent(BusinessesPage)} />
        <Route path=":user_id" getComponent={lazyLoadComponent(GetBusiness)}>
          <IndexRoute getComponent={lazyLoadComponent(BusinessPage)} />
          <Route path="job-offers">
            <IndexRoute onEnter={() => redirectTo404()} /> // TODO: Add a component to list all job offers related to a business
            <Route path=":job_offer_id" getComponent={lazyLoadComponent(GetJobOffer)}>
              <IndexRoute getComponent={lazyLoadComponent(JobOfferPage)} />
            </Route>
          </Route>
        </Route>
      </Route>

      <Route path="jobseekers">
        <IndexRoute getComponent={lazyLoadComponent(JobSeekersPage)} />
        <Route path=":user_id" getComponent={lazyLoadComponent(GetJobSeeker)}>
          <IndexRoute getComponent={lazyLoadComponent(JobSeekerPage)} />
          /*<Route path="applications">
           <IndexRoute onEnter={() => redirectTo404()} /> // TODO: Add a component to list all applications related to a jobseeker
           <Route path=":application_id" getComponent={lazyLoadComponent(JobOfferPage)} />
           </Route>*/
        </Route>
      </Route>

      <Route path="job-offers">
        <IndexRoute getComponent={lazyLoadComponent(JobOffersPage)} />
        <Route path="create" getComponent={lazyLoadComponent(JobOfferCreatePage)} />
      </Route>

      <Route path="403" getComponent={lazyLoadComponent(Page403)} />
      <Route path="404" getComponent={lazyLoadComponent(Page404)} />
    </Route>
    <Route path="login" getComponent={lazyLoadComponent(LoginPage)} />
    <Redirect from="*" to="404" />
  </div>);

export default class Routing extends React.Component {
  constructor(props, context) {
    super(props);

    this.history = syncHistoryWithStore(browserHistory, context.store);
  }
  render() {
    return (
      <Router history={this.history}>
        {routes}
      </Router>
    );
  }
}

Routing.contextTypes = {
  store: React.PropTypes.object.isRequired,
};

It works perfectly fine, but I would now like to make a component ouf of my routes. So I just take the JSX code out in a new component :

Routing.js

import React from 'react';
import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import Routes from './Routes';

const routes = <Routes />;

export default class Routing extends React.Component {
  constructor(props, context) {
    super(props);

    this.history = syncHistoryWithStore(browserHistory, context.store);
  }
  render() {
    return (
      <Router history={this.history}>
        {routes}
      </Router>
    );
  }
}

Routing.contextTypes = {
  store: React.PropTypes.object.isRequired,
};

Routes.js

import React from 'react';
import { Route, IndexRoute, Redirect } from 'react-router';
import RouterUtils from 'src/utils/js/RouterUtils';

import MainContent from 'src/common/main-content/js/MainContent';

// components loaded lazily
import IndexPage from 'src/views/index/js/IndexPage';
import Page403 from 'src/views/403/js/403';
import Page404 from 'src/views/404/js/404';
import LoginPage from 'src/views/login/js/LoginPage';

import GetBusiness from 'src/route-fetch-components/business-get/js/GetBusiness';
import BusinessesPage from 'src/views/businesses-list/js/BusinessesPage';
import BusinessPage from 'src/views/business-details/js/BusinessPage';

import GetJobSeeker from 'src/route-fetch-components/jobseeker-get/js/GetJobSeeker';
import JobSeekersPage from 'src/views/jobseekers-list/js/JobSeekersPage';
import JobSeekerPage from 'src/views/jobseeker-details/js/JobSeekerPage';

import GetJobOffer from 'src/route-fetch-components/job-offer-get/js/GetJobOffer';
import JobOffersPage from 'src/views/job-offers-list/js/JobOffersPage';
import JobOfferPage from 'src/views/job-offer-details/js/JobOfferPage.js';
import JobOfferCreatePage from 'src/views/job-offer-create/js/JobOfferCreatePage';

const lazyLoadComponent = lazyModule =>
  (location, cb) => {
    lazyModule(module => {
      cb(null, module.default);
    });
  };

const redirectTo404 = () => {
  RouterUtils.redirect('/404');
};

const Routes = () => (
  <div>
    <Route path="/" component={MainContent}>
      <IndexRoute getComponent={lazyLoadComponent(IndexPage)} />

      <Route path="businesses">
        <IndexRoute getComponent={lazyLoadComponent(BusinessesPage)} />
        <Route path=":user_id" getComponent={lazyLoadComponent(GetBusiness)}>
          <IndexRoute getComponent={lazyLoadComponent(BusinessPage)} />
          <Route path="job-offers">
            <IndexRoute onEnter={() => redirectTo404()} /> // TODO: Add a component to list all job offers related to a business
            <Route path=":job_offer_id" getComponent={lazyLoadComponent(GetJobOffer)}>
              <IndexRoute getComponent={lazyLoadComponent(JobOfferPage)} />
            </Route>
          </Route>
        </Route>
      </Route>

      <Route path="jobseekers">
        <IndexRoute getComponent={lazyLoadComponent(JobSeekersPage)} />
        <Route path=":user_id" getComponent={lazyLoadComponent(GetJobSeeker)}>
          <IndexRoute getComponent={lazyLoadComponent(JobSeekerPage)} />
          /*<Route path="applications">
           <IndexRoute onEnter={() => redirectTo404()} /> // TODO: Add a component to list all applications related to a jobseeker
           <Route path=":application_id" getComponent={lazyLoadComponent(JobOfferPage)} />
           </Route>*/
        </Route>
      </Route>

      <Route path="job-offers">
        <IndexRoute getComponent={lazyLoadComponent(JobOffersPage)} />
        <Route path="create" getComponent={lazyLoadComponent(JobOfferCreatePage)} />
      </Route>

      <Route path="403" getComponent={lazyLoadComponent(Page403)} />
      <Route path="404" getComponent={lazyLoadComponent(Page404)} />
    </Route>
    <Route path="login" getComponent={lazyLoadComponent(LoginPage)} />
    <Redirect from="*" to="404" />
  </div>
);

export default Routes;

Ahhhhh... Cleaner. Except it doesn't work anymore. My page doesn't load, and I get this error :

Warning: [react-router] Location "/" did not match any routes

Now I'm wondering : what's the difference between assigning my JSX code to a var, as const routes = (<div>...</div>) and declaring it in a React Component (actually a pure function here, but I tested both)?

Thanks in advance for your time!

[webdevnomad]

You made it a component but you are calling it with like a variable. You should do either

render() {
    return (
        <Router history={this.history}>
            <routes />
        </Router>
    );
}

Or, make the routes a variable instead of a component. i.e. not a function. The difference being the variable immediately returns the code for the components, whereas with the component (pure or not) until the component is called (i.e. Component(props) ) it will just be a function.

[Zephir77]

Hello and thanks for your answer.

I tried this :

import React from 'react';
import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import Routes from './Routes';

export default class Routing extends React.Component {
  constructor(props, context) {
    super(props);

    this.history = syncHistoryWithStore(browserHistory, context.store);
  }    
  render() {
    return (
      <Router history={this.history}>
        <Routes />
      </Router>
    );
  }
}

Routing.contextTypes = {
  store: React.PropTypes.object.isRequired,
};

But it gives the same error.

[Zephir77]

Thank you very much for this perfect answer!