Ошибка бросания крошек реагировать при использовании с маршрутизатором - PullRequest
Новая
       8

Ошибка бросания крошек реагировать при использовании с маршрутизатором

0 голосов
/ 15 января 2019

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}). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив.

Ответы [ 2 ]

0 голосов
/ 19 января 2019

Вы не должны передавать ссылку напрямую, а использовать ее с 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;

Подробнее о JSX вы можете прочитать в официальной документации React: https://reactjs.org/docs/introducing-jsx.html

0 голосов
/ 19 января 2019

Я использовал эту библиотеку 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

Примечание: использование начальной загрузки необязательно

...