React Router v4 with babel gives error with multiple routes

Question

I am trying to do response-router v4 ("response-router": "^ 4.0.0-2") in my project and have tried to implement it based on a quick start example . However, I cannot get it to work with multiple routes. I keep getting:

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.

My code is as follows

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

export default Router;

The code generated by webpack and babel is as follows

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);

I installed the debugger instruction where the error was selected, and I see the following:

Where you can see that the returned reaction element is an array, as the error message means it may be. And the props identify the offending components as routes inside my BrowserHistory component.

, BrowserHistory, . Match Miss, .

, , . , , , .

- , , .

Answer 1

MatchProvider div.

,

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

MatchProvider , . , MatchProvider.js React-router,

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

return this.props.children

- .