How to render root path in React

[stefanjank]

How to render this via Java and show in react?

<linkURL
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
        fieldLabel="Link"
        nodeTypes="cq:Page"
        name="./linkURL"
        required="{Boolean}true"
        rootPath="/content/demoproject"/>

[SantoshSai · Accepted solution]

Hi @stefanjank ,

1. You can either directly render linkURL by AEM objects in HTL like
   

   ${properties.linkURL}

2. or Implement Sling Model 
   Java
   

   import org.apache.sling.api.resource.Resource;
   import org.apache.sling.models.annotations.Model;
   
   import javax.inject.Inject;
   
   @Model(adaptables = Resource.class)
   public class LinkURLModel {
       
       @Inject
       private String linkURL;
       
       public String getLinkURL() {
           return linkURL;
       }
   }

   HTL
   

   <div data-sly-use.url="com.training.osgi.core.models.LinkURLModel">
   Link URL: ${url.linkURL}
   </div>

3. For React Please Visit these links:
   1. https://experienceleague.adobe.com/docs/experience-manager-64/developing/headless/spas/spa-implement...
   2. https://www.dlighthouse.co/2020/02/creating-aem-component-using-reactjs.html

Hope that helps!

Regards,

Santosh