Блог

Я использую маршрутизатор React v4. Я создаю базовую функцию «профиль».

Основная структура следующая : у меня есть таблица списка профилей ( /каталог-просмотр/профили ) Внутри этой же страницы, пользователь может создать профиль, нажав кнопку.

Таким образом, пользователь нажимает на эту кнопку, маршрут меняется для /каталог-просмотр/профили/создание. Вы закончили со списком таблиц И компонентом «создать профиль» на той же странице.

И внутри этого компонента вы можете перемещаться между двумя URL-адресами ( /catalog-view/profils/create, который является базовым, и /catalog-view/profils/create/ProfileID).

 const ProfilsSection = ({ ...props }) => {
    return (
        <Fragment>
            <ProfileCreationPanel {...props} /> <---- THAT ONE IS THE COMPONENT THAT LEADS TO CREATE A PROFIL
            <DisponibilitiesSectionContainer />
            <ProfilsTableSectionContainer />
        </Fragment>
    )
};

<---THAT COMPONENT IS RESPONSIBLE FOR DISPLAYING THE CONTENT COMPONENT FOR BOTH ROUTE
const ProfileCreationPanel = () => {
    return (
        <Fragment>
            <ProtectedRoute
                exact
                AUTHORIZED_ROLES={[USER_ROLES.DELIVERY]}
                path={profileCreationPath.path.creation}
                render={props => <Content {...props} />}
            />
            <ProtectedRoute
                exact
                AUTHORIZED_ROLES={[USER_ROLES.DELIVERY]}
                path={profileCreationPath.path.editClients}
                render={props => <Content {...props} />}
            />
        </Fragment>
    )
};

<---THAT ONE IS WRAPPED IN A SWITCH TO DISPLAY THE RIGHT CONTENT ACCORDING TO THE EXACT PATH
const ProfilesContent = ({ ...props }) => {
    return (
        <Switch>
            <ProtectedRoute
                exact
                AUTHORIZED_ROLES={[USER_ROLES.DELIVERY]}
                path={profileCreationPath.path.creation}
                render={props => <ProfileInformationsContainer {...props} />}
            />
            <ProtectedRoute
                exact
                AUTHORIZED_ROLES={[USER_ROLES.DELIVERY]}
                path={profileCreationPath.path.editClients}
                render={props => "second component"}
            />
        </Switch>
    )
};

export default ProfilesContent;

 

И, наконец, это мои маршруты

 export const profileCreationPath = {
    path: {
        creation: `${catalogRoutes.deliveryProfils.path}/creation`,
        editClients: `${catalogRoutes.deliveryProfils.path}/creation/:profileId`
    },
    buildPath: ({ isEditingClients, profileId }) =>
        !isEditingClients ? profileCreationPath.path.creation
            : toProfileCreationEditingClientsPath({ profileId })
}

export const toProfileCreationEditingClientsPath = pathToRegexp.compile(profileCreationPath.path.editClients);

 

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