Answer the question
In order to leave comments, you need to log in
What is the best way to build breadcrumb with url parameter transformations in mind?
Stack: react+redux+react-router+react-intl .
There is a self-written component - Breadcrumb, which transforms the current route into something user friendly, of course with the ability to navigate, for example: /users/create => "Users / Create"
For this purpose, I simply split the path into parts and translate each part using i18n.
This component automatically works for any of my paths, permanently displayed in the header of the site.
Everything was fine until the need arose to use identifiers: /users/edit/43, where 43 is the user id, and react-router receives this config: 'edit/:id'.
It is clear that my custom control cannot handle this. But I don't want to just hide the parametric part. Instead, I want to replace 43 with a string, such as a username. So breadcrumb would look like this: "Users / Edit / Andrei".
From the obvious, pass parameters to push that my breadcrumb could take from the store and use in building the "path":
const rename = path => path == 43 ? 'Andrei' : path;
push({pathname: 'users/edit/43', state: rename});
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question