【问题标题】：Router ignores this.props.children when routes are imported but not when inline导入路由时路由器会忽略 this.props.children，但内联时不会
【发布时间】：2016-05-30 04:02:54
【问题描述】：

简介

我正在尝试使用 React-Router 和 ExpressJS 创建一个 Isomorphic ReactJS 应用程序。这需要一些模块化，以便客户端和服务器都可以访问特定的脚本，例如路由。模块化是通过 Browserify 实现的，我遵循的路由器指南是 react-router lesson server rendering 和 react-router guide server rendering。

问题

当路由从外部 routes.jsx 导入时，路由器的行为会有所不同，而不是写入与路由器相同的文件中。 this.props.children 在路由被导入并且视图替换整个应用程序时被忽略，而当路由在同一个文件中并且仅替换应用程序的子部分时被尊重（期望结果）。

示例

routes.jsx - 用于服务器和客户端

import React from 'react';
import {Route, IndexRoute, Redirect} from 'react-router';

/* Base */
import App from './client.jsx';

/* Views */
import HomeView from '_view/HomeView';
import WorkView from '_view/WorkView';

const Routes = (
  <Route path="/" component={App}>
    <IndexRoute component={HomeView} />
    <Redirect from="home" to="/" component={HomeView} />
    <Route path="work" component={WorkView} />
  </Route>
);

export default Routes;

client.jsx - 导入的路由

当使用导入的路由时，整个<main> 被替换为例如。 HomeView 而不仅仅是{this.props.children}。

import React from 'react';
import {render} from 'react-dom';
import {Router, browserHistory} from 'react-router';

/* Routes */
import Routes from './routes.jsx';

/* Components */
import Header from '_component/Header';

/* Views */
import HomeView from '_view/HomeView';
import WorkView from '_view/WorkView';

export default class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <main>
        <Header />
        {this.props.children}
      </main>
    )
  }
}

if(typeof window !== 'undefined' && typeof document !== 'undefined') {
  render(<Router history={browserHistory} routes={Routes} />,
    document.getElementById('root'));
}

client.jsx - 内联路由

当使用内联路由时，只有{this.props.children} 被替换为例如。主视图。但是，这消除了模块化，服务器无法再访问路由。这意味着要么从 client.jsx 导出路由，要么拥有相同规则的两个副本。我觉得这两个都不吸引人。

import React from 'react';
import {render} from 'react-dom';
import {Router, Route, IndexRoute, Redirect, browserHistory} from 'react-router';

/* Components */
import Header from '_component/Header';

/* Views */
import HomeView from '_view/HomeView';
import WorkView from '_view/WorkView';

export default class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <main>
        <Header />
        {this.props.children}
      </main>
    )
  }
}

const Routes = (
  <Route path="/" component={App}>
    <IndexRoute component={HomeView} />
    <Redirect from="home" to="/" component={HomeView} />
    <Route path="work" component={WorkView} />
  </Route>
);

if(typeof window !== 'undefined' && typeof document !== 'undefined') {
  render(<Router history={browserHistory} routes={Routes} />,
    document.getElementById('root'));
}

问题

错误在哪里？使用我的代码，使用 react-router，还是使用 browserify 的导出方法？

【问题讨论】：

有一个循环引用，可能是这里的问题
这是我的一个问题，我会尝试将它们分开，看看是否能解决问题。似乎这不是问题的原因，但在我尝试之前我不会解雇它:)

标签： express reactjs browserify react-router isomorphic-javascript

【解决方案1】：

原来我对 browserify 的缺乏经验导致了这个问题。与往常一样，很难调试出问题的地方，但答案很简单：

有一个循环引用，可能问题出在这里——顾铭峰

谢谢你，stackoverflow！

【讨论】：