likun7981 / auto-breadcrumb

Auto generate breadcrumb for React-Router 4.xx

auto-breadcrumb's Issues

How can I pass component data to breadcrumb?

Here is the use case:
Let's consider person module i.e person = { id : 0, name : 'John Snow' }
I want person name on the breadcrumb link instead of id text.
This can be achieved if I pass directly person name as part of URL but I do not want to do that. (Due to some real-life scenario;s )
For more understanding see the below code :

const Breadcrumbs = BreadcrumbConfig({
  //How can I get name over here i.e John Snow instead of id
  dynamicRoutesMap: {
    '/:id': ({ id, name }) => ` ${name} `
  },
  
});
export default class App extends Component {
    render() {
        return (
            <Router>
              <div>
              <Route
                render={({ location }) => { 
                    return <Breadcrumbs pathname={location.pathname} />; 
                }}
              />
            <Person match={{ params: { id: 0 }, url: '' }} />
            </div>
            </Router>
        );
    }
}

class Person extends Component {
  constructor(props){
    super(props);
     this.state = { person : this.getPersonInfo(props.match.params.id) }

  }
  getPersonInfo(){
    // asnyc call that fetches data from server end;
    //return  {'id':0, name:'John Snow'}
    return person;
  }
  render(){
    return (
      <div>
        <h3>{this.state.person.name}’s Friends</h3>
        <ul>
          <li>
              <Link to={`${this.props.match.url}/${this.props.match.params.id}`}>
                  {this.state.person.name}
              </Link>
          </li>
        </ul>
      </div>
    );
  }

};

Real life scenario: I have one module that is X-Ray Device which has attributes: device_id and IP address.
So over here I want to show IP address on the breadcrumbs link but I do not want to pass IP address as part of URL which kind of weird if pass.

Thanks!

Using auto-breadcrumb with antd via Breadcrumb and BreadcrumbItem config

I'm trying to use auto-breadcrumb with antd like in demo but i'm having problems setting the config. I understand the config for the breadcrumb ui components are described in the readme as copied below:

keyName	type	default	description
Breadcrumb	ReactComponent	ul	The Breadcrumb container
BreadcrumbItem	ReactComponent	li	The Breadcrumb Item

However, when i tried setting the config like so, it doesn't work:

import AutoBreadcrumbs from 'auto-breadcrumb';
import Breadcrumb from 'antd/lib/breadcrumb';
config = {
  Breadcrumb: <Breadcrumb />,
  BreadcrumbItem: <Breadcrumb.Item />,
  ..
}
const Breadcrumbs = AutoBreadcrumbs(config);

Then, I noticed in the source code, that ul and li are set like strings, so i also tried this, which also failed:

import AutoBreadcrumbs from 'auto-breadcrumb';
import Breadcrumb from 'antd/lib/breadcrumb';
config = {
  Breadcrumb: 'Breadcrumb',
  BreadcrumbItem: 'Breadcrumb.Item',
  ..
}
const Breadcrumbs = AutoBreadcrumbs(config);

Would you please share how you did it? Thanks!

Always getting 404

Hi this is my config:

const BreadcrumbsConfig = BreadcrumbConfig({
  Breadcrumb: AntBreadcrumb,
  BreadcrumbItem: AntBreadcrumb.Item,
  dynamicRoutesMap: {
    "/app/clients/:clientId/manage": "Client Management",
    "/app/clients/:clientId/overview": "Client Overview"
  },
  homePath: "/app/dashboard",
  itemRender: (name: string, path: string) => {
    // tslint:disable
    debugger;
    return path ? <Link to={path}>{name}</Link> : `${name}`;
  },
  staticRoutesMap: {
    "/app/clients": "Clients",
    "/app/clients/list": "List",
    "/app/dashboard": "Dashboard",
    "/app/reports": "Reports",
    "/app/reports/agents": "Agents",
    "/app/reports/ddns": "DDNS"
  }
});

My router are something like:

/app/dashboard
/app/clients/list
/app/clients/:clientId/manage
/app/clients/:clientId/overview
/app/reports/agents
etc

But I'm always getting 404, wondering why, am I missing something?

Proposal: customRoutesMap

Hi there, thanks for this. Would you help me consider this use case for singular and plural routes? Looking forward to your feedback.

Current Outcome

Say we have the following urls:

• Product Listing Page: /products
• Product Detail Page: /product/:slug

and autobreadcrumb config as such:

dynamicRoutesMap: {
  '/product/:slug': ({ slug }) => `${slug}`,
},

Now, In Product Detail Page, breadcrumbs are showing:
Home > Product > My-First-Product

Problem

However, Product in the breadcrumb above example above is linking to /product. There is no such url.

Desired outcome

BreadcrumbItem for Product should link to /products instead of /product.

Proposal

Add a customRouteMap config that will allow complete override of the displayed breadcrumb for that url.

Example:

dynamicRoutesMap: { .. },
customRoutesMap: {
  '/product/:slug': [<Link to="/products">Products</Link>, ({ slug }) => `${slug}`],
},

Corresponding breadcrumbs:
Home > Products > My-First-Product
with Products linking to /products/

Multiple 'Not found' elements when a single one is enough

If the number of unmatched routes is greater than 1, it's probably still only worth showing a single notFound element. It seems overkill, and kind of unexpected, to ever display more than 1.

If I have static routes configured with

staticRoutesMap: {
  '/': 'My App',
  '/about': 'About'
},
notFound: 'Not Found'

if I visit /foo/bar the breadcrumbs will display My App > Not Found > Not Found, with the first Not Found being clickable. I would say there should only ever be a single Not Found, and it's not clickable.

how to use containerProps to assign className

I use the className and style in the component like

<Breadcrumbs 
    className="breadcrumb"
    pathname={location.pathname} 
    style={{marginBottom: 0, backgroundColor: '#E8E8E8'}}
/>

It shows the warning:

The version v1.0.0 has remove "className,style,itemClass,itemStyle", We will remove them next version, please use "containerProps" and "itemProps" config to replace them.

How i replace them by containerProps and itemProps? Or how to use containerProps to assign className?

NotFound on route that exists

Hi, I'm getting 404NotFound when the route exists. My friend executes the same code on macOS and it works, but on windows it does not unless I specify a static route for each possible route. Any route with a parameter in it ex: 'localhost/foo/{id}', it also says not found. This is being tested in Chrome on both operating systems.

This happened on v1.1.1 and v.1.2.2.

import BreadcrumbConfig from 'auto-breadcrumb';
import {withRouter} from 'react-router-dom';

const BreadCrumbs = BreadcrumbConfig({
    staticRoutesMap: {
        '/': 'Dashboard',
        '/administration': 'Administration',
        '/administration/users': 'Users',
        '/administration/users/new': 'New',
        '/administration/roles': 'Roles',
        '/administration/roles/new': 'New',
        '/dev-login': 'Development Settings'
    },
    containerProps: {
        className: 'breadcrumbs'
    }
});

export const BreadCrumbComponent = ({location}) =>
    <div>
        <BreadCrumbs pathname={location.pathname}/>
    </div>;

export const BreadCrumb = withRouter(BreadCrumbComponent);