Дружественные имена в хлебных крошках с помощью response-router - PullRequest
Новая
       170

Дружественные имена в хлебных крошках с помощью response-router

1 голос
/ 30 мая 2020

Мое приложение React использует response-router-dom (v5.1.2). Я добавил в свой пользовательский интерфейс хлебную крошку, которая анализирует местоположение маршрутизатора для предоставления ссылок на более высокие уровни пользовательского интерфейса. 

...
import { Route, Link as RouterLink } from 'react-router-dom';

const BreadcrumbBar = () => {
    return (
        <Box m={2}>
            <Route>
                {({ location }) => {
                    const pathnames = location.pathname.split('/').filter(x => x);
                    return (
                        <Breadcrumbs>
                            {pathnames.map((value, index) => {
                                const last = index === pathnames.length - 1;
                                const to = `/${pathnames.slice(0, index + 1).join('/')}`;

                                return last
                                    ? (
                                        <Typography key={to}>
                                            {value}
                                        </Typography>
                                    ) : (
                                        <Link component={RouterLink} to={to} key={to}>
                                            {value}
                                        </Link>
                                    );
                            })}
                        </Breadcrumbs>
                    );
                }}
            </Route>
        </Box>
    );
};
...

Он отлично работает, но компоненты пути в местоположении маршрутизатора не совсем дружелюбны. Например, чтобы гарантировать уникальность маршрутов, если путь ссылается на запись из базы данных, я использую идентификатор записи в пути, поскольку другие поля, которые могут быть более удобными, не гарантируют уникальности.

Таким образом, типичный URL-адрес маршрутизатора может выглядеть так:

/home/users/5ecf40ed29f0e13e93e00d2a/name/dog

Из-за чего хлебная крошка выглядит так: 

home / users / 5ecf40ed29f0e13e93e00d2a / name / dog

Я бы действительно хотел оставьте URL-адреса пути такими, какие они есть, но представьте имя пользователя в строке навигации и, возможно, даже локализованные имена для компонентов пути. В идеале, в итоге получается более дружелюбная навигационная цепочка: 

Home / Users / Bob Smith / Name / Pet

Поскольку response-router не использует центральную таблицу маршрутов (что имеет свои достоинства), я не вижу простого способа делай это чисто. В идеале, в любом месте, где я указываю to='<path>', можно использовать понятное имя name='Bob Smith'? и расположение маршрутизатора будет содержать эти метаданные для использования при создании хлебной крошки.

Я вижу несколько способов сделать это, но я надеюсь, что я просто слишком плотный и упускаю очевидную технику, что создатели намеревались, прежде чем я окунусь и сделаю что-то другое.

Есть предложения?

...