A
A
Andrei Smirnov2017-02-14 20:36:24
React
Andrei Smirnov, 2017-02-14 20:36:24

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});

Everything is fine, except that everything is somehow difficult, it looks like a crutch. Unfortunately, I have to write my own custom breadcrumb for a number of reasons, and I don’t know if other implementations solve such a problem - I didn’t look. I myself have only recently started using react, so there is not much experience.
Any ideas how to implement the desired in the most optimal way, given the given stack?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question