Brtdku

React Breadcrumbs is throwing some error when using with Router.

I am following this tutorial for implementation.

http://learnreact.robbestad.com/breadcrumbs

Below is the code:

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;

Below is the error:

Objects are not valid as a React child (found: object with keys {Breadcrumb, Breadcrumbs}). If you meant to render a collection of children, use an array instead.

You shouldn't pass the reference directly but use it with React.createElement or in other words, in JSX land you should do just <Breadcrumbs />.

If you look carefully at the code from the link you posted (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>

    );

  }

});

It creates new React element and now let's check your code:

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;

If you replace {Bredcrumbs} with <Breadcrumbs />, it should just work:

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;

You can read more about JSX in the official React documentation:
https://reactjs.org/docs/introducing-jsx.html

I have used this library https://www.npmjs.com/package/react-breadcrumbs-dynamic][1] to implement the breadcrumbs.

Created one route.js and imported the library

import { Breadcrumb as BootstrapBreadcrumb } from 'react-bootstrap'

import { Breadcrumbs, BreadcrumbsItem } from 'react-breadcrumbs-dynamic';

import CrumbItem from '../components/common/breadcrumb/CrumbItem';

Created the breadcrumbs container like this in 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>

);

Given breadcrumbs items in Another component brands.js

import { BreadcrumbsItem } from 'react-breadcrumbs-dynamic';

        render() {

        return (

        <BreadcrumbsItem to={'/brands'}>

          Brands

        </BreadcrumbsItem>

        )

    }

Created link container separately

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

Note: Using bootstrap is optional