Can very deeply nesting React routing be simplified by duplicating routes?

Question

I'm using React router v4. I'm building a basic "profile" feature.

The main structure is the following one : I got a profile list table ( /catalog-view/profils ) Inside this same page, the user can create a profile by clicking a button.

So the user clicks on that button, the routing is changing for /catalog-view/profils/create. You ended with the table list AND the "create profil" component on the same page.

AND inside that component, you can navigate between two URLs ( /catalog-view/profils/create which is the base one and /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;

And finally those are my routes

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

This is a working case but I feel there is a better way to do so. Everything looks quite messy and I wonder if Route duplication to render the same content component according to different routes is the right thing to do

Can very deeply nesting React routing be simplified by duplicating routes?

0 Answers0