ReactJS – React Router V4 with Babel gives multiple routes errors

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 = (
 
 
 );
 return returnVal;
 }
}

export default Router; 

The code generated by webpack and babel is as follows

var Router = function (_Component) {
 _inherits(Router, _Component);< br />
 function Router() {
 _classCallCheck(this, Router);

 return _possibleConstructorReturn(this, (Router.__proto__ || Object.getPrototypeOf(Rou ter)).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 have set a throw error In the debugger statement, I see the following:

< /p>

You can see that the react element returned is an array because the error message implies that it may be. Props recognize the offending component as a path in the BrowserHistory component.

If I delete one of them Routing, then there is only one element in the BrowserHistory component, and it will render correctly. If I have a Match and a Miss component, it will also give an error.

I am not sure where to start looking, the error occurs Which library. As far as I know, the output code works, I don’t know why it is not rendered correctly.

If anyone knows how to solve it, it would be greatly appreciated.

return _react2.default.createElement("div", null, this.props.children);< /pre> 
Replace
 
 
return this.props.children
If for some reason you want to put the route directly under the router.< /p> 

I am trying to make react-router v4 ("react-router": "^ 4.0.0-2") work in my project, and try to base it on quick start The example implements it. But I can't make it work with multiple routes. I have been at:

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 = (
 
  
 );
 return returnVal;
 }
}

export default Router;

webpack and babel generation The code 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;< br />}(_react.Component);

I have set up a debugger statement that throws an error, and I see the following:

You can see that the react element returned is an array, because the error message implies that it may be The props recognize the offending component as a path in the BrowserHistory component.

If I delete one of the routes, then there is only one element in the BrowserHistory component, and it will render correctly. If I have a Match and a Miss component, It will also give an error.

I am not sure where to start and in which library the error occurred. As far as I know, the output code is valid, and I don’t know why it is not rendered correctly.

If anyone knows how to solve it, it would be greatly appreciated.

Things in Router or MatchProvider must be contained in a div.

As follows

 

 < br /> 
 

MatchProvider directly returns its child nodes, so It can only have one child node. It can also be returned by modifying MatchProvider.js in the React-router library

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

Replace

return this.props.children

If for some reason you want to put the route directly under the router.