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

Question

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} 的对象）。如果您打算渲染一组子项，请改用数组。

Answer 1

您不应直接传递引用，而应将其与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

Answer 2

我已经使用这个库https://www.npmjs.com/package/react-breadcrumbs-dynamic][1] 来实现面包屑。

创建了一个 route.js 并导入了库

import { Breadcrumb as BootstrapBreadcrumb } from 'react-bootstrap'
import { Breadcrumbs, BreadcrumbsItem } from 'react-breadcrumbs-dynamic';
import CrumbItem from '../components/common/breadcrumb/CrumbItem';

在 route.js 中像这样创建了面包屑容器：

const Routes = () => (
  <BrowserRouter>
    <div>
      <div className="breadcrumbs-container">
        <BreadcrumbsItem glyph='home' to={base_path}>
          Home Page
        </BreadcrumbsItem>
        <Breadcrumbs
          hideIfEmpty={{ active: true }}
          item={CrumbItem}
          container={BootstrapBreadcrumb}
          finalProps={{ active: true }}
          duplicateProps={{ to: 'href' }}
        />
      </div>
      <Route exact path='/' component={HomePage} />
      <Route path='/brands' component={Brands} />
      <Footer />
    </div>
  </BrowserRouter>
);

另一个组件brands.js中的给定面包屑项目

import { BreadcrumbsItem } from 'react-breadcrumbs-dynamic';
        render() {
        return (
        <BreadcrumbsItem to={'/brands'}>
          Brands
        </BreadcrumbsItem>
        )
    }

单独创建链接容器

import { Breadcrumb } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'

const CrumbItem = ({to, ...props}) => (
  <LinkContainer to={to}>
    <Breadcrumb.Item {...props}>
    </Breadcrumb.Item>
  </LinkContainer>
)

export default CrumbItem

注意：使用引导程序是可选的