render "home" breadcrumb

[icd2k3]

render "home" breadcrumb

[diegolaciar]

@icd2k3,

Your fix is working.

I deleted node_modules folder. Looks like it was caching the older version?. Something weird, but now it's showing the home breadcrumb.

Thank you

[icd2k3]

Hey @diegolaciar, thanks for the question!

I'll work on a patch to allow for the home root route in config.

For now, since it's probably expected that the Home breadcrumb would appear everywhere, you could just render one separately outside of the config. Using the readme example:

import React from 'react';
import { NavLink } from 'react-router-dom';
import { withBreadcrumbs } from 'react-router-breadcrumbs-hoc';

const UserBreadcrumb = ({ match }) =>
  <span>{match.params.userId}</span>; // use match param userId to fetch/display user name

const routes = [
  { path: 'users', breadcrumb: 'Users' },
  { path: 'users/:userId', breadcrumb: UserBreadcrumb},
  { path: 'something-else', breadcrumb: ':)' },
];

const Breadcrumbs = ({ breadcrumbs }) => (
  <div>

    <NavLink to="/"}>Home</NavLink>/   // <----

    {breadcrumbs.map(({ breadcrumb, path, match }) => (
      <span key={path}>
        <NavLink to={match.url}>
          {breadcrumb}
        </NavLink>
        <span>/</span>
      </span>
    ))}
  </div>
);

I'll post back here when patch is complete

[icd2k3]

@diegolaciar I pushed a new version 1.0.3 to address this. You should now be able to use:

{ path: '/', breadcrumb: 'Home' }

In your config. Thanks again, and please let me know if you run into any other issues.

[diegolaciar]

@icd2k3 I updated react-router-breadcrumbs-hoc ^1.0.2 → ^1.0.3

I tried again using :

{ path: '/', breadcrumb: 'Home' }
or
{ path: '', breadcrumb: 'Home' }

and i don´t get the home breadcrumb.

[diegolaciar]

Looking into code could be something with my routes config.

All my routes are child from home route.

I can' t discover whats going on.

Anyway, thank you for you fix and fast response !

[icd2k3]

@diegolaciar my apologies, there was a problem with the compiled build published to npm (apparently prepublishOnly doesn't work as I expected it to)

...anyways, this problem will be solved after upgrading the package 1.0.3 → 1.0.5

Sorry for the inconvenience - please let me know if it fixes your issue

[diegolaciar]

Hi @icd2k3,

I just updated react-router-breadcrumbs-hoc ^1.0.3 → ^1.0.5 and installed the pkg.

I have on the config

{ path: "/", breadcrumb: "Home" },

It looks like the issue persist.
Breadcrumbs render good and it shows all the routes I configured, but is not showing the "home" breadcrumb.

[diegolaciar]

If I do
{ path: "", breadcrumb: "Home" },
Error: withBreadcrumbs: breadcrumb and path must be provided in every route object

So I just leave { path: "/", breadcrumb: "Home" },

[icd2k3]

{ path: "/", breadcrumb: "Home" } should work (the path can't be blank).

Seems to be working OK on my end... Could you please provide the react, react-router, & react-router-dom versions you're using?

Also, can you post your code from the component rendering your breadcrumbs?

Thanks!

[diegolaciar]

"react": "^16.1.0",
"react-dom": "^16.1.0",
"react-router": "^4.2.0",

I cant push all the code but looks something like this.

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withBreadcrumbs } from "react-router-breadcrumbs-hoc";
import NavigateNext from "material-ui-icons/NavigateNext";
import { Link, NavLink } from "react-router-dom";

const routes = [
  { path: "/", breadcrumb: "Home" },  
  { path: "/users", breadcrumb: "Users" },
];
export class App extends Component {
  static propTypes = {
    children: PropTypes.node,
  };

  static defaultProps = {
    children: "No content.",
  };

  render() {
    const { breadcrumbs } = this.props;
    return (
      <div className="home-app">
        <div className="page-container">
          <Header />
          <div>
            {breadcrumbs.map(({ breadcrumb, path, match }, index) => (
              <span key={path}>
                {index < breadcrumbs.length - 1 ? (
                  <NavLink to={match.url}>{breadcrumb}</NavLink>
                ) : (
                  breadcrumb
                )}
                {!!(index < breadcrumbs.length - 1) && (
                  <span
                    style={{
                      verticalAlign: "sub",
                    }}
                  >
                    <NavigateNext
                      style={{
                        width: 16,
                        height: 16,
                      }}
                    />
                  </span>
                )}
              </span>
            ))}
          </div>
          {this.props.children}
        </div>
      </div>
    );
  }
}

App = withBreadcrumbs(routes)(App);
export default App;

[icd2k3]

@diegolaciar good to hear! Please let me know if you run into any other issues.