URL shortening for react SPA is not working | Community
Skip to main content
Level 2
January 30, 2024
Solved

URL shortening for react SPA is not working

  • January 30, 2024
  • 3 replies
  • 1185 views

Hi,

 

I am trying to shorten the dispatcher url of react spa project with etc mapping. I have followed these community posts -

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-spa-react-app-not-working-though-dispatcher/m-p/647034#M43501 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/short-urls-using-react-spa/td-p/453377 

 

I have implemented page model as follows -

public class PageImpl implements Page { public static final String RESOURCE_TYPE = "wknd-spa-react/components/page"; @Self @2434638(type = ResourceSuperType.class) @delegate-1(excludes = PageDelegateExclusion.class) private com.adobe.aem.spa.project.core.models.Page page; @Self private SlingHttpServletRequest request; @OSGiService private LinkManager linkManager; @9944223 public String getExportedPath() { return linkManager.getMappedPath(request, page.getExportedPath()); } @9944223 public Map<String, ? extends HierarchyNodeExporter> getExportedChildren() { return page.getExportedChildren().entrySet() .stream() .collect(Collectors.toMap( entry -> linkManager.getMappedPath(request, entry.getKey()), entry -> new PageExporter(entry.getValue(), request, linkManager), (existing, replacement) -> existing, LinkedHashMap::new )); } @9944223 public String getExportedType() { return RESOURCE_TYPE; } } interface PageDelegateExclusion extends ComponentDelegateExclusion { String getExportedPath(); Map<String, ? extends HierarchyNodeExporter> getExportedChildren(); }

 

Also changed the meta property of customheaderlibs.html

<meta property="cq:pagemodel_root_url" data-sly-use.page="com.adobe.aem.guides.wknd.spa.react.core.models.Page" content="${page.hierarchyRootJsonExportUrl}" />

 

LinkManagerImpl

@8220494(service = LinkManager.class, immediate = true) public class LinkManagerImpl implements LinkManager { @3214626 private SlingSettingsService slingSettingsService; @9944223 public String getMappedPath(SlingHttpServletRequest request, String path) { if (!slingSettingsService.getRunModes().contains("publish")) return path; String mappedUrl = request.getResourceResolver().map(path); if (mappedUrl.equals(path)) return "/"; try { return new URL(mappedUrl).getPath(); } catch (MalformedURLException e) { return mappedUrl; } } }

 

Now, url shortening is working but react routing is not working properly. This is my content structure

Here the country nodes are SPA Root page and others are SPA Page. 

 

From author, If I land on test page then go to the index page the following model gets loaded and both pages render properly

 

But If I hit the test page through dispatcher short url and then go to the index page, the index page does not renders, it shows a blank white page. But if I reload then it renders properly.

 

 

What am I missing? How can I resolve this?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Julkar__Naim

Solved this issue by using HierarchyPage implementation from this repo 
https://github.com/adobe/aem-sample-we-retail-journal 

 

updated getExportedChildren(), getExportedPath(), getModelUrl() methods to support short path. 

3 replies

TarunKumar
Community Advisor
Community Advisor
January 30, 2024

Hi @julkar__naim ,

The routing is implemented with React Router. React Router is a collection of navigation components for React applications. 

You might need to inspect how React Router is integrated with the SPA and experiment using React Router’s Link component.
For more details on it you can follow below link:-

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/navigation-routing.html?lang=en

Thanks
Tarun

Level 2
January 30, 2024

Hi @tarunkumar ,

 

I am using React/latest branch from aem-guides-wknd-spa repo. The navigation component is already implemented with React router. 

renderLink(item){ return ( <Link to={item.url} title={item.title} aria-current={item.active && 'page'} className={this.baseCss + '__item-link'}>{item.title}</Link> ); }

Do I need to modify anything else? 

 

Thanks

Naim

kautuk_sahni
Community Manager
Community Manager
February 2, 2024

@julkar__naim Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

Kautuk Sahni
Julkar__NaimAuthorAccepted solution
Level 2
February 12, 2024

Solved this issue by using HierarchyPage implementation from this repo 
https://github.com/adobe/aem-sample-we-retail-journal 

 

updated getExportedChildren(), getExportedPath(), getModelUrl() methods to support short path.