I seem to be unable to get the dynamic breadcrumb to work. I've provided my breadcrumb component as well as my routes array. I've added several test dynamic breadcrumbs but they're ignored. When I console.log to crumb in the component the default crumb.breadcrumb is used.
/**
* Breadcrumbs.js
*/
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
import { Heading, Pane } from 'evergreen-ui';
import routes from 'containers/App/utils/routes';
const BreadCrumbs = ({ breadcrumbs }) => (
<Pane alignItems="center" flex={1} display="flex">
{breadcrumbs.map((crumb, i, arr) => {
const isLastElement = arr.length - 1 === i;
let LinkElement = Fragment;
let props = {};
if (!isLastElement) {
LinkElement = NavLink;
props = { href: crumb.match.url, to: crumb.match.url };
}
return (
<Fragment key={crumb.match.url}>
<LinkElement {...props}>
<Heading
color={isLastElement ? '#234361' : '#1070ca'}
marginLeft={3}
marginRight={3}
size={400}
>
{crumb.breadcrumb}
</Heading>
</LinkElement>
{!isLastElement && '/ '}
</Fragment>
);
})}
</Pane>
);
BreadCrumbs.propTypes = {
breadcrumbs: PropTypes.array.isRequired,
};
export default withBreadcrumbs(routes)(BreadCrumbs);
/**
* routes.js
*/
import React from 'react';
import GuestRoute from 'components/routes/GuestRoute';
import UserRoute from 'components/routes/UserRoute';
import LoginPage from 'containers/LoginPage/loadable';
import ForgotPasswordPage from 'containers/ForgotPasswordPage/loadable';
import ResetPasswordPage from 'containers/ResetPasswordPage/loadable';
import ActivateAccountPage from 'containers/ActivateAccountPage/loadable';
import CustomersPage from 'containers/CustomersPage/loadable';
import ReportsPage from 'containers/ReportsPage/loadable';
import ReportsDetailsPage from 'containers/ReportsDetailsPage/loadable';
import SystemsPage from 'containers/SystemPage/loadable';
import SystemDetailsPage from 'containers/SystemDetailsPage/loadable';
import SystemActivitysPage from 'containers/SystemActivityPage/loadable';
import UsersPage from 'containers/UsersPage/loadable';
import UserDetailsPage from 'containers/UserDetailsPage/loadable';
import UserActivityPage from 'containers/UserActivityPage/loadable';
import FormsPage from 'containers/FormsPage/loadable';
import FormManagementPage from 'containers/FormManagementPage/loadable';
import FormSubmitPage from 'containers/FormSubmitPage/loadable';
import SettingsPage from 'containers/SettingsPage/loadable';
import LogoutPage from 'containers/LogoutPage';
import NotFoundPage from 'containers/NotFoundPage/loadable';
import MainLayout from './../layouts/MainLayout';
import EmptyLayout from './../layouts/EmptyLayout';
const userNamesById = { '016b18b1-41db-49ae-b15a-8cdaf5d78945': 'John' };
const DynamicUserBreadcrumb = ({ match }) => (
<h1>{userNamesById[match.params.userId]}</h1>
);
const routes = [
{
path: '/login',
exact: false,
component: LoginPage,
layout: EmptyLayout,
type: GuestRoute,
},
{
path: '/forgot-password',
exact: false,
component: ForgotPasswordPage,
layout: EmptyLayout,
type: GuestRoute,
},
{
path: '/reset-password/:token',
exact: false,
component: ResetPasswordPage,
layout: EmptyLayout,
type: GuestRoute,
},
{
path: '/activate-account/:token',
exact: false,
component: ActivateAccountPage,
layout: EmptyLayout,
type: GuestRoute,
},
{
path: '/customers',
exact: false,
component: CustomersPage,
layout: MainLayout,
type: UserRoute,
},
{
path: '/reports',
exact: true,
component: ReportsPage,
layout: MainLayout,
type: UserRoute,
},
{
path: '/reports/:id',
exact: false,
component: ReportsDetailsPage,
layout: MainLayout,
type: UserRoute,
},
{
path: '/systems',
exact: true,
component: SystemsPage,
layout: MainLayout,
type: UserRoute,
breadcrumb: 'test',
},
{
path: '/systems/:id',
exact: false,
component: SystemDetailsPage,
layout: MainLayout,
type: UserRoute,
},
{
path: '/systems/:id/activity',
exact: true,
component: SystemActivitysPage,
layout: MainLayout,
type: UserRoute,
},
{
path: '/users',
exact: true,
component: UsersPage,
layout: MainLayout,
type: UserRoute,
},
{
path: '/users/:id',
exact: true,
component: UserDetailsPage,
layout: MainLayout,
type: UserRoute,
},
{
path: '/users/:id/activity',
exact: true,
component: UserActivityPage,
layout: MainLayout,
type: UserRoute,
},
{
path: '/forms',
exact: true,
component: FormsPage,
layout: MainLayout,
type: UserRoute,
},
{
path: '/forms/:id',
exact: false,
component: FormManagementPage,
layout: MainLayout,
type: UserRoute,
breadcrumb: DynamicUserBreadcrumb,
},
{
path: '/submit/:id',
exact: false,
component: FormSubmitPage,
layout: MainLayout,
type: UserRoute,
},
{
path: '/settings',
exact: false,
component: SettingsPage,
layout: MainLayout,
type: UserRoute,
},
{
path: '/logout',
exact: false,
component: LogoutPage,
layout: MainLayout,
type: UserRoute,
},
{
component: NotFoundPage,
layout: MainLayout,
type: UserRoute,
},
];
export default routes;