Question

与Router一起使用时，反应面包屑引发一些错误。

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

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

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

与路由器一起使用时react-breadcrumbs抛出错误

2 个答案: