Errors when using Query- or Route Parameters

[mickbigblue]

Hi,

I'm currently extending an MO360 application for our client.

In this particular case I need to navigate via router to a predefined route (implemented according to the documentation). Thing is, I need to transmit some information along with it. From my point of view it doesn't matter if via Query- or Route Parameter.

I have tried to implement this via the provided documentation / examples. However, no matter which of the two paths I choose, I am confronted with an error.

To be more specific:

1. Route Parameter

This is the defined route in src/routes/index.tsx via IRouteConfig:

  {
    component: HeaderPartialRules,
    name: 'partialrules',
    pattern: '/rules/vehiclerules/partialrules/:rulename',
  },

and here is the "calling-part":

    const vehicleRuleName = 'abc';
    const url = router.linkTo('partialrules', { rulename: vehicleRuleName });
    router.navigate(url);

After navigating to the given component I would like to access the route parameter for further processing (filtering). That is:

  const ruleName = router.getRoute().parameter.rulename;

I can see that it navigates to given URL, including the specified route parameter:

However, the target-component is not being rendered and I get the following error:

I have checked multiple different things, even with literal strings in the linkTo- parameter object but this error keeps showing up.

Also, I have tried commenting out the processing/use of the given parameter, but the error keeps coming up, so I suppose that this is happening somewhere in the router code, not in the processing component.

2. Query Parameter

This is the defined route in src/routes/index.tsx via IRouteConfig:

  {
    component: HeaderPartialRules,
    name: 'partialrules',
    pattern: '/rules/vehiclerules/partialrules',
  },

and here is the "calling-part":

    const vehicleRuleName = 'abc';
    const url = router.linkTo('partialrules', {}, { rulename: vehicleRuleName });
    router.navigate(url);

and via this line I'm trying to parse the query parameter:

    const ruleName = router.getRoute().query.rulename;

Again, I can see that the link to the route is created correctly and navigation to the component works:

However, now I get the error:

I have tried different things but I am not able to make this work.

Maybe you guys have some idea to help me solve this...

Thanks in advance!

[prode81]

Hey there,

thank you for your input. Both your examples should work fine. I just checked my last project and Could you give some more details, which core version you are using and maybe provide a minimal example with the router definitions?

Cheers, Paul

[mickbigblue]

Thanks for you quick response!

I've also tried it by creating a demo app (explained on the main github page) and it worked with both parameters. I'm using ftk-core version 0.3.2

But I think I know what the issue is now (although not how to fix it,yet). I am using the withLayout-hook in the router definitions. Among other things, I use it to provide the header-bar for all the components.

Once I don't use it for the particular component, that I want to navigate to, the errors disappear and I can use the parameters. The header-bar is quite complex, for example it wraps a bread-crumb component and some other stuff...

I will investigate a little further and see what I can do, but in case this rings a bell for you, I'd appreciate any hints.

[mickbigblue]

Hi,

I solved my problem. It was due to a breadcrumb that had problems with the parameters.

Sorry for the noise!