reactjs – 带有babel的React Router v4给出了多条路由的错误
发布时间:2020-12-15 20:15:44 所属栏目:百科 来源:网络整理
导读:我正在尝试让 react-router v4(“react-router”:“^ 4.0.0-2”)在我的项目中工作,并尝试基于 quick start example实现它.但是我无法使其与多个路由一起工作.我一直在: invariant.js:38 Uncaught Invariant Violation: MatchProvider.render(): A valid Re
我正在尝试让
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 如果您因某种原因希望将路由直接放在路由器下面. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |