在声明的内联中导入时使用相同的JSX组件时出错

Question

I've got a simple redux boilerplate project and I'm experiencing different behaviour when I import a top level (smart) component compared to if I inline the class declaration.

Creating the class causes no errors however when I extract the class to a separate file I receive the following error:

Warning: Failed propType: Required prop `routerState` was not specified in `AppContainer`. Check the render method of `RoutingContext`.

I have tried inlining the entire file and the error goes away

// == Import ==================================================================
import AppContainer from '../containers/App.jsx';
// === Declare Inline =========================================================
import { connect } from 'react-redux';
import { Component, PropTypes } from 'react';


@connect(state => ({ routerState: state.router }))
class AppContainer extends Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    routerState: PropTypes.object.isRequired,
  }

  render() {
    return (
      <div className="container-fluid">
        <div className="row">
          <div className="col-xs-12">
            <h1>App</h1>
            {this.props.children}
          </div>
        </div>
      </div>
    );
  }
}
// ============================================================================

Here is the project repo (its super striped back).

  "dependencies": {
    "history": "^1.12.5",
    "react": "^0.14.0",
    "react-dom": "^0.14.0",
    "react-redux": "^4.0.0",
    "react-router": "^1.0.0-rc3",
    "redux": "^3.0.2",
    "redux-router": "^1.0.0-beta3"
  },

Answer 1

So from what I understand it's because you have said that the propTypes children and routerState are to be expected, yet you haven't used them as propTypes when using the component, as you are passing the App component as a propType into the <Route /> component.

<Route path="/" component={AppContainer}>
  <IndexRoute component={Home} />
</Route>

I am not sure if your App component should have these propTypes, as you can't pass them in. However you should be able to retrieve this.props.children by changing that propType to PropTypes.node .

You can pass props into your router components by doing:

<Route path="myComponent/:name" component={MyComponent} />

Where 'name' is the param you want, and do: this.props.params.name within 'MyComponent'