在变量和React组件中声明JSX代码之间的区别

Question

我最近开始玩Redux并很快发现了这条错误消息：Warning: You cannot change <Router routes>; it will be ignored（我也在使用react-router）。经过一番搜索，我明白我必须在一个变量中声明我的路线，这样它们就不会被重新渲染。

所以这是我的代码：

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,
};

它工作得非常好，但我现在想要制作我的路线的一部分。所以我只是将JSX代码放在一个新组件中：

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;

啊，啊......清洁。除了它不再起作用。我的页面没有加载，我收到此错误：

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

现在我想知道：将我的JSX代码分配给var，const routes = (<div>...</div>)并在React Component中声明它（实际上是一个纯函数，但我测试了两者）之间的区别是什么？

提前感谢您的时间！