我正在尝试让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元素是一个数组,因为错误消息暗示它可能是。道具将违规组件识别为BrowserHistory组件中的路径。
如果我删除其中一个路由,那么BrowserHistory组件中只有一个元素,它会正确呈现。如果我有一个Match和一个Miss组件,它也会给出错误。
我不确定从哪里开始查看,错误发生在哪个库中。据我所知,输出代码有效,我不知道为什么它无法正确呈现。
如果有人知道如何修复它,我们将不胜感激。
答案 0 :(得分:9)
路由器或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
如果您因某种原因希望将路由直接放在路由器下。