路由器导入时路由器忽略this.props.children但内联时不会

Question

简介

我正在尝试使用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}替换为例如。 HomeView。但是，这消除了模块化，服务器无法再到达路由。这意味着要么从 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的导出方法？

Answer 1

原来我对browserify的经验不足导致了这个问题。与代码一样，很难调试出错的地方，但答案很简单：

  

有一个循环引用，也许这里是问题 - 顾明峰

谢谢你，stackoverflow！