AEM SPA Routing Issues with hash and query parameter | Community
Skip to main content
viveksachdeva
viveksachdeva
New Participant
Jun 4, 2020 2:40 PM UTC
Solved

AEM SPA Routing Issues with hash and query parameter

Hey guys,

 

We are using AEM with React and having trouble with SPA Routing. We are facing an intermittent issue when the Link contains # or ?

Page data is available using .model.json on the page URI but sometimes when we have # and ?, model.json is added after full URL rather than just path and hence it fails.

And it happens when on dispatcher only when we dont have .html in the URL.

E.g:

Lets say a React Link points to /en/mypage?cid=campaign

I expect data call for this to be  /en/mypage.model.json but sometimes it is sent as /en/mypage?cid=campaign.model.json

 

This logic is abstracted in the node module and hence difficult to check. Anyone else faced similar issue?

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
dzmitryk7401781Accepted solution
Level 2
Mar 22, 2021 1:52 PM UTC

We've prepared patch to fix it: https://github.com/adobe/aem-spa-page-model-manager/pull/54 

View reply

17 replies

dzmitryk7401781Accepted solution
Level 2
Mar 22, 2021 1:52 PM UTC

We've prepared patch to fix it: https://github.com/adobe/aem-spa-page-model-manager/pull/54 

Translate
    kautuk_sahni
    kautuk_sahni
    Employee
    Mar 23, 2021 9:46 AM UTC
    @dzmitryk7401781, thank you for sharing the solution with community. Keep doing the great work. Looking forward to see you more in the AEM community.
    Translate
    Kautuk Sahni
    dzmitryk7401781
    Level 2
    Mar 5, 2021 10:15 AM UTC

    We also have the same issue appearing, right after we started to rewrite URLs removing `.html` bit in a page path.

     

    Looks to me that URL parsing code in the routing library contains a bug for the case of absent page extension and should be fixed.

    Translate
      viveksachdeva
      viveksachdevaAuthor
      New Participant
      Mar 21, 2021 5:04 PM UTC
      Yeah. we had to change those links to normal links rather than React link..
      Translate
      Nikhil-Kumar
      Nikhil-Kumar
      New Participant
      Aug 24, 2020 4:28 PM UTC

      @viveksachdeva 

      Try playing around with the dipatcher re-write rules if it helps.

      We guys also implemented similar thing but didn't faced such issue.

      Translate
        viveksachdeva
        viveksachdevaAuthor
        New Participant
        Aug 25, 2020 2:52 AM UTC
        The URL modification happens at client side before it reaches Dispatcher. For "#" in the URL, we were facing this issue consistently but query params, it was intermittent.
        Translate
        viveksachdeva
        viveksachdevaAuthor
        New Participant
        Jun 7, 2020 3:46 PM UTC

        We are doing like similar to https://helpx.adobe.com/experience-manager/kt/sites/using/getting-started-spa-wknd-tutorial-develop/react/chapter-3.html... Does it really matter how we populate the URL.. It is just a JSX variable and it is populated on what author puts in the component. When I say automatically, I mean whenever we pass a URL to React Link, AEM automatically makes a call to model.json of the link specified in to attribute.

         

        There isnt anything in componentDidMount.. We just get props in mapped JS for the components and thats what we are using in React Link

         

        Translate
        sumantap8752196
        Level 2
        Jun 7, 2020 2:21 PM UTC
        that code is just <a> in React, but how React component is populating myurl? there must be some React component State properties which is read , check that code, also when you say autometically, there must be some code on componentDidMount() which triggers async call. Sorry without your further code I cannot help you.
        Translate
        viveksachdeva
        viveksachdevaAuthor
        New Participant
        Jun 7, 2020 1:47 PM UTC

        It is happening while routing from one page to another.. cq:pagemodel_root_url always has root page URL and not current page URL. And we are not using custom code to load page model json. Its just a Link tag with a URL and that automatically calls model.json internally

        <Link to={myurl}>
        Label
        </Link>

         

        Translate
        sumantap8752196
        Level 2
        Jun 7, 2020 1:33 PM UTC
        this issue comes when first time page load or after page is loaded then when you navigate between links? It seems you have custom code to call model.json on every link click, it could be issue with react component state is not updated correctly, so if you post your code then will be better to upderstand
        Translate
        viveksachdeva
        viveksachdevaAuthor
        New Participant
        Jun 7, 2020 12:58 PM UTC
        That part is maintained in header and header doesnt change when we navigate between the pages. and it points only to root page which is fine..
        Translate
        sumantap8752196
        Level 2
        Jun 7, 2020 12:16 PM UTC
        Understood, are you using Adobe SDK or own to call model? if Adobe SDK then can you check what is the value of cq:pagemodel_root_url when you have this error, ideally it should have yourUrl.model.json and then React code reads it from there
        Translate
        viveksachdeva
        viveksachdevaAuthor
        New Participant
        Jun 7, 2020 10:28 AM UTC
        Yes I am using extensionless URLs. Its not really an issue with Apache rewrite because the model.json request that is generated from the browser itself is incorrect(adding mode.json after full URL rather than just the path)).
        Translate
        Show more replies
        Terms & ConditionsAccessibility statement

        Loading footer...