topic Re: Internal Linking with Route Params in CMS Development

Internal Linking with Route Params

KWallace7 — Wed, 04 Sep 2024 16:52:42 GMT

Hi!

I have a question for linking from one page to another with route parameters. We have a react app running with a bunch of products, and to filter the products there are route params added. I want to link from the home page to this filtered version of the Products page. There are a lot of instances of this so want to do it through the CMS if possible. I know it is possible to link these from different pages with set a tags in the code as well.

Some more info. If the Link or URL CMS field is set to content you can set it to the Products page, but not a filtered Products page. If it is set to the External setting it throws an error as it is under the same domain.

Let me know if there is a solution to this!

Best,

Katie

Re: Internal Linking with Route Params

Jaycee_Lewis — Wed, 04 Sep 2024 23:33:44 GMT

Hi, @KWallace7 👋 Thanks for your question. I'd like to invite some of our amazing community experts who have React experience to the conversation. Hey @Teun @james-portant @Kevin-C do you have any suggestions for @KWallace7?

Thank you very much for taking a look! — Jaycee

Re: Internal Linking with Route Params

KWallace7 — Fri, 06 Sep 2024 18:46:28 GMT

Hey Jaycee!

I wanted to circle back on this. I'm not sure it is an actual React problem. More just that I can't link to a filtered page in the CMS. Here's an example.

Under content for the URL I can set it to the Products Page, but not a filtered version of the Products Page, as that is not an option.

Under External for the URL it fails when I set it to https://example.com/products?filter={example-filter}

Additionally I get this error message on the page when I set an external URL with the route params.

{"status":"error","message":"Cannot parse path {url={type=EXTERNAL, content_id=null, href=https:",

Finally in the console I get a 400 bad request error.

Best,

Katie

Re: Internal Linking with Route Params

Jaycee_Lewis — Tue, 10 Sep 2024 17:42:11 GMT

Thanks for clarifying @KWallace7 👋 It sounds like the link is getting treated as a fully external link vs trying to link internally with query parameters. Which is giving the 404.

Have you looked into building a custom module and leveraging HubL? Hey @Anton @Jnix284 @Stephanie-OG have you tackled anything similar in your recent project work?

Thanks for taking a look! — Jaycee

Re: Internal Linking with Route Params

Jnix284 — Tue, 10 Sep 2024 17:59:48 GMT

Hi @Jaycee_Lewis I haven't run into this error specifically, but I believe I've worked on a project with a similar objective @KWallace7.

If I'm understanding correctly, you have a product page that has filters and you want to add links to that page with the products pre-filtered?

I was the PM for a custom project for POWER Pro theme to add URL parameters for the product page and as Jaycee mentioned, it required a custom module to configure the parameters so they could be added to the filters. The code required is beyond my capabilities with HubL, but I can at least confirm it's possible and maybe one of the others will be able to help further!

Re: Internal Linking with Route Params

Jaycee_Lewis — Tue, 10 Sep 2024 19:23:40 GMT

Thanks @Jnix284 🙌 — Jaycee