带有 babel 的 React Router v4 给出了多个路由的错误

Question

我正在尝试使react-router v4 ("react-router": "^4.0.0-2") 在我的项目中工作，并尝试基于quick start example 实现它。但是，我无法使其适用于多条路线。我不断得到：

invariant.js:38 Uncaught Invariant Violation: MatchProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

我的代码如下

class Router extends Component {
  render() {
    let returnVal = (<BrowserRouter>
      <Match pattern="/" component={FrontPage} />
      <Match pattern="/home" component={Home} />
    </BrowserRouter>);
    return returnVal;
  }
}

export default Router;

webpack 和 babel 生成的代码如下所示

var Router = function (_Component) {
  _inherits(Router, _Component);

  function Router() {
    _classCallCheck(this, Router);

    return _possibleConstructorReturn(this, (Router.__proto__ || Object.getPrototypeOf(Router)).apply(this, arguments));
  }

  _createClass(Router, [{
    key: 'render',
    value: function render() {
      var returnVal = _react2.default.createElement(
        _reactRouter.BrowserRouter,
        null,
        _react2.default.createElement(_reactRouter.Match, { pattern: '/', component: _FrontPage2.default }),
        _react2.default.createElement(_reactRouter.Match, { pattern: '/home', component: _Home2.default })
      );
      return returnVal;
    }
  }]);

  return Router;
}(_react.Component);

我已经设置了一个调试器语句来抛出错误，我看到以下内容：

您可以看到返回的 react 元素是一个数组，因为错误消息暗示它可能是。并且 props 将违规组件标识为我的 BrowserHistory 组件中的路由。

如果我删除其中一条路由，使得 BrowserHistory 组件内只有一个元素，它会正确呈现。如果我有一个 Match 和一个 Miss 组件，它也会给出错误。

我不确定从哪里开始查找，错误发生在哪个库中。据我所知，输出代码是有效的，我不知道为什么它不能正确呈现。

如果有人知道如何解决它，将不胜感激。

Answer 1

Router 或 MatchProvider 中的内容必须包装在 div 中。

比如下面的

<BrowserRouter>
  <div>
    <Match exactly pattern="/" component={FrontPage} />
    <Match pattern="/home" component={Home} />
  </div>
</BrowserRouter>

MatchProvider 直接返回它的孩子，因此它只能有一个孩子。也可以通过修改React-router库里面的MatchProvider.js来解决

return _react2.default.createElement("div", null, this.props.children);

而不是

return this.props.children

如果您出于某种原因希望将路由直接放在路由器下方。