Params matching return empty React-router

Question

I am facing an apparently simple problem but it is getting complicating , even with some well written existing topics.

I have a global route

export const createPricingPath = `${catalogRoutes.priceLists.path}/creation/:pricingId?/:step(products|parameters|customers-groups)`;
export const toCreatePricingPath = pathToRegexp.compile(createPricingPath);

As you can see I have a step parameters and an optional one called pricingId.

I have a parent route leading to my top level parent component

    <ProtectedRoute
      exact
      AUTHORIZED_ROLES={[USER_ROLES.PRICING]}
      path={createPricingPath}
      render={props => <PricingCreationPanelContainer {...props} />}
    />

The parent top root component is the following one :

            <SlidePaneProvider route={catalogRoutes.priceLists.path}>
                {({ handleCancel }) => (
                    <Fragment>
                        <PricingCreationPanelHeader handleCancel={handleCancel} {...this.props} />
                        <SlidePaneBody>
                            <PricingContent handleCancel={handleCancel} {...this.props} />
                        </SlidePaneBody>
                    </Fragment>
                )}
            </SlidePaneProvider>

Inside this component we got somme "commun" elements like a PricingCreationHeader and SlidesComponents ( body ect...), and I have a PricingContent which is the children containing my sub-routes and children components.

It looks like this:

const PricingContent = ({ handleCancel, match: { params } }) => {

    return (
        <Switch>
            <ProtectedRoute
                exact
                AUTHORIZED_ROLES={[USER_ROLES.PRICING]}
                path={toCreatePricingPath({ step: 'parameters' })}
                render={props => <PricingCreation {...props} />}
            />
            <ProtectedRoute
                exact
                AUTHORIZED_ROLES={[USER_ROLES.PRICING]}
                path={toCreatePricingPath({ step: 'products', pricingId: params.pricingId })}
                render={props => <PricingProducts {...props} />}
            />
            <ProtectedRoute
                exact
                AUTHORIZED_ROLES={[USER_ROLES.PRICING]}
                path={toCreatePricingPath({ step: 'customers-groups', pricingId: params.pricingId })}
                render={props => <PricingClients handleCancel={handleCancel} {...props} />}
            />
        </Switch>
    )
};

The problem is, I can't figure out why I am not able to get the match.params.pricingId and match.params.step props inside every child component (PricingClients and PricingProducts ). PricingCreation doesnt need pricingId by the way, only the other two.

I do have the impression that everything is clearly well written. The child component should be able to get all the params since the root parent component does.

Maybe it is an architecture problem so every suggestion is welcome ! I went through many existing topics and was not able to find a proper solution.

Thank you very much for helping me !

Aliaksei Yakubuk · Accepted Answer · 2021-09-12 05:31:25Z

1

As far as I can see here, path for child routes is specified incorrectly. I dont think that making path dynamically is a good idea. It is enough to specify shortened version of parent path and match.pricingId will be available in child components:

const PricingContent = ({ handleCancel }) => {

    return (
        <Switch>
            <ProtectedRoute
                path={ `${base_path }/creation/:pricingId?/parameters`}
                // other props stay the same
            />
            <ProtectedRoute
                path={ `${base_path}/creation/:pricingId?/products`}
               // other props stay the same
            />
            <ProtectedRoute
                path={ `${base_path}/creation/:pricingId?/customer-groups`}
               // other props stay the same
            />
        </Switch>
    )
};

According to code above base_path is catalogRoutes.priceLists.path.

I think there is no need in :step route param as we have a separate component for every route. In case we still need it, it's possible to do smt like this: .../:step(parameters);
Optional :pricingId? can cause mounting of incorrect component, for example: base_url/products/parameters In this case router is considering "products" as :pricingId route param which is not good=) I often try to avoid optional params in the middle of a path

My apologies if I missed or misunderstood something Thank you

edited Sep 12, 2021 at 5:31

answered Sep 11, 2021 at 20:09

Aliaksei Yakubuk

113 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Morzanne Over a year ago

Hello and thank you for your response. Could you tell me which path is base_path is corresponding to ? And what if if the user is trying to access only base path url ?

Aliaksei Yakubuk Over a year ago

Hi! I added annotation about base_path in my answer.

Aliaksei Yakubuk Over a year ago

And what value do you mean by base path url?

Morzanne Over a year ago

I mean base_path/creation for example. If he hits that url what do we display ? Because with your solution, the url parent component ( the first one in my topic) would have base_path/creation as path right ?

Aliaksei Yakubuk Over a year ago

Exactly, parent component does not require any route params, so that we can have path={`${base_path}/creation`} for parent route

|

Collectives™ on Stack Overflow

Params matching return empty React-router

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related