时间戳

首页 > 解决方案 > 与路由器一起使用时反应面包屑抛出错误

javascript - 与路由器一起使用时反应面包屑抛出错误

问题描述

与路由器一起使用时，React Breadcrumbs 会引发一些错误。

我正在按照本教程进行实施。

http://learnreact.robbestad.com/breadcrumbs

下面是代码： 

var Breadcrumbs = require('react-breadcrumbs');

const Routes = () => (
  <BrowserRouter>
        <div>
          <Header />
          <MegaMenu />
          {Breadcrumbs}
          <Route exact path='/' name='HomePage' component={HomePage}/>
          <Route path='/celebrity' name='Celebrities' component={Celebrities}/>
          <Route path='/axios' name='Axios' component={Axios}/>
          <Route path='/brands' name='Brands' component={Brands}/>
          <Footer />
        </div>
  </BrowserRouter>
);

export default Routes;

以下是错误：

对象作为 React 子对象无效（找到：带有键 {Breadcrumb, Breadcrumbs} 的对象）。如果您打算渲染一组子项，请改用数组。

标签： javascriptreactjsecmascript-6breadcrumbs

解决方案

您不应该直接传递引用，而是使用它，React.createElement或者换句话说，在JSX你应该做的土地上只是<Breadcrumbs />.

如果您仔细查看您发布的链接中的代码（http://learnreact.robbestad.com/breadcrumbs）：

var Breadcrumbs = require('react-breadcrumbs');

MyComponent = React.createClass({
  render: function() {
     return (
       <div>
            <Breadcrumbs />{/* You see it here, <Breadcrumbs /> not {Breadcrumbs} */}
       </div>
    );
  }
});

它创建了新的 React 元素，现在让我们检查您的代码：

var Breadcrumbs = require('react-breadcrumbs');

const Routes = () => (
  <BrowserRouter>
        <div>
          <Header />
          <MegaMenu />
          {Breadcrumbs}{/* <-------- Here is the issue */}
          <Route exact path='/' name='HomePage' component={HomePage}/>
          <Route path='/celebrity' name='Celebrities' component={Celebrities}/>
          <Route path='/axios' name='Axios' component={Axios}/>
          <Route path='/brands' name='Brands' component={Brands}/>
          <Footer />
        </div>
  </BrowserRouter>
);

export default Routes;

如果您替换{Bredcrumbs}为<Breadcrumbs />，它应该可以工作：

var Breadcrumbs = require('react-breadcrumbs');

const Routes = () => (
  <BrowserRouter>
        <div>
          <Header />
          <MegaMenu />
          <Breadcrumbs />
          <Route exact path='/' name='HomePage' component={HomePage}/>
          <Route path='/celebrity' name='Celebrities' component={Celebrities}/>
          <Route path='/axios' name='Axios' component={Axios}/>
          <Route path='/brands' name='Brands' component={Brands}/>
          <Footer />
        </div>
  </BrowserRouter>
);

export default Routes;

您可以在 React 官方文档中阅读更多关于 JSX 的信息： https ://reactjs.org/docs/introducing-jsx.html

推荐阅读