Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

URL shortening for react SPA is not working

Avatar

Level 2

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-work... 

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

 

I have implemented page model as follows -

public class PageImpl implements Page {
    public static final String RESOURCE_TYPE = "wknd-spa-react/components/page";

    @Self
    @Via(type = ResourceSuperType.class)
    @Delegate(excludes = PageDelegateExclusion.class)
    private com.adobe.aem.spa.project.core.models.Page page;

    @Self
    private SlingHttpServletRequest request;

    @OSGiService
    private LinkManager linkManager;

    @Override
    public String getExportedPath() {
        return linkManager.getMappedPath(request, page.getExportedPath());
    }


    @Override
    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
            ));
    }

    @Override
    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

@component(service = LinkManager.class, immediate = true)
public class LinkManagerImpl implements LinkManager {

    @reference
    private SlingSettingsService slingSettingsService;

    @Override
    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

Untitled.png

Untitled (1).png

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

 

Julkar__Naim_2-1706592955500.png

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.

Julkar__Naim_3-1706593027314.png

 

 

What am I missing? How can I resolve this?

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 2

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. 

View solution in original post

4 Replies

Avatar

Community Advisor

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/s...

Thanks
Tarun

Avatar

Level 2

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

Avatar

Administrator

@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

Avatar

Correct answer by
Level 2

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.