reactjs – 带有babel的React Router v4给出了多条路由的错误

  • 内容
  • 相关
小蓝博客收集整理的这篇文章主要介绍了reactjs – 带有babel的React Router v4给出了多条路由的错误,小蓝博客小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试让 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 }),{ pattern: '/home',component: _Home2.default })
      );
      return returnVal;
    }
  }]);

  return Router;
}(_react.Component);

我已经设置了一个抛出错误的调试器语句,我看到以下内容:

您可以看到返回的react元素是一个数组,因为错误消息暗示它可能是.道具将违规组件识别为BrowserHistory组件中的路径.

如果我删除其中一个路由,那么BrowserHistory组件中只有一个元素,它会正确呈现.如果我有一个Match和一个Miss组件,它也会给出错误.

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

如果有人知道如何解决它,将不胜感激.

解决方法

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",this.props.children);

代替

return this.props.children

如果您因某种原因希望将路由直接放在路由器下面.

总结

以上是小蓝博客为你收集整理的reactjs – 带有babel的React Router v4给出了多条路由的错误全部内容,希望文章能够帮你解决reactjs – 带有babel的React Router v4给出了多条路由的错误所遇到的程序开发问题。

如果觉得小蓝博客网站内容还不错,欢迎将小蓝博客网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

  • 打赏支付宝扫一扫
  • 打赏微信扫一扫
  • 打赏企鹅扫一扫

本文标签:

版权声明:若无特殊注明,本文皆为《小蓝博客》原创,转载请保留文章出处。

本文链接:reactjs – 带有babel的React Router v4给出了多条路由的错误 - https://www.nswin.cc/39129.html