Breadcrumb trail with react js

Question

I'm trying to create my own custom breadcrumb trail component using react js. I'm familiar with react js. But I have no clear idea about how to do that.. (Specially about breadcrumb trail). Can anyone give me some examples or tutorials relevant this..?

Answer 1

I think the best way for you to do that is to install react-router

https://github.com/rackt/react-router

Then you can do it very easily by nesting routes within each other and then use some of the utility functions it gives you to get the current routes. I haven't used the newest version of react-router. But the old version did it something like this:

https://github.com/rackt/react-router/issues/1060

var currentRoutes = this.context.router.getCurrentRoutes();

This used to give you an array of all the current routes, so if you're nested 3 routes deep, it will give you 3 routes. I'm not sure if this is the exact syntax anymore, since they've upgraded to 1.0, the API may have changed, but its likely to be similar.

Answer 2

Example of breadcrumbs using latest 1.0 release of react-router (At this time v1.0.0-rc3) https://github.com/rackt/react-router/blob/master/examples/breadcrumbs/app.js

Or use https://github.com/svenanders/react-breadcrumbs which takes care of breadcrumbs for you if you use react-router. It worked well with react-router 0.13.x from experience, I haven't upgraded to the latest 1.0 release yet, but it should work too.