React-router: create breadcrumb from router hierarchy

[jzimmek]

Hi, i am trying to implement a breadcrumb and run into trouble.

This is part of my routes definition (my full one is deeper nested):

<Route handler={Root}>
  <Route name="dashboard" handler={Dashboard} path="/admin2/dashboard"/>

  <Route name="courses" handler={CoursesIndex} path="/admin2/courses"/>
  <Route handler={Courses} path="/admin2/courses/:courseId">
    <Route name="courses/show"          path="/admin2/courses/:courseId/show"           handler={CoursesShow}/>
    <Route name="courses/dashboard"     path="/admin2/courses/:courseId/dashboard"      handler={CoursesDashboard}/>
    <Route name="courses/info"          path="/admin2/courses/:courseId/info"           handler={CoursesInfo}/>
    <Route name="courses/pricing"       path="/admin2/courses/:courseId/pricing"        handler={CoursesPricing}/>
    <Route name="courses/curriculum"    path="/admin2/courses/:courseId/curriculum"     handler={CoursesCurriculum}/>

    <Route handler={Lectures} path="/admin2/courses/:courseId/curriculum/:lectureId">
      <Route name="lectures/show"         path="/admin2/courses/:courseId/curriculum/:lectureId/show" handler={LecturesShow}/>
    </Route>
  </Route>
</Routes>

I want the breadcrumb to reflect the path of the activeRoute up to the outer most parent route {Root}.

When "lectures/show" is active, then I want to have a breadcrumb like:

{Root} / {Courses} / {CoursesCurriculum} / {Lectures} / {LecturesShow}

It get a bit more difficult than that, because the breadcrumb parts are not always static, but can also be dynamic (asynchronously loaded data) - like the "title" of the course and lecture.

My attempt was to create a BreadcrumbStore a add the breadcrumb part of each Route in componentWillMount (componentDidMount), refresh once asynchronous data is available in componentDidUpdate and remove it on componentWillUnmount. It seemed to work in the beginning, but failed once the routes get nested and you transition between different routes. I have not digged deeply in the code, but it seems that react-router does not always invoke componentWillMount/componentWillUnmount in the same order I would expect it.

I think a breadcrumb is a very common ui-element and will most likely reflect the routes hierarchy - at least in my usecase.

How do you implement a breadcrumb?

[ryanflorence]

ooh, I like this question, I don't have time right now to investigate but a breadcrumb store is the right approach I think. you'll want to push into a list in componentWillMount and know the index of your entry, then when async data lands, update that entry. Then your <Breadcrumb/> subscribes to the store and draws the crumb out of the list.

[ryanflorence]

okay, you now know the name of your route in the handler, this should be enough information for you to build a breadcrumb.

transition hooks and components always go in the same order, so you can just observe whats happening and plan on it. Note that when transitioning from one sibling route to another, you won't get transitions/mounting from parent routes.

I'm going to close this and hopefully make a breadcrumb example soon, its a great use-case. Please reopen if you find having the routes name to insufficient.

[Rustem]

Hi, @jzimmek any results on breadcrumbs with dynamic crumbs ?