AEM SPA React Static Component Initialization

Question

Is there a way to statically create a React component mapped to a specific model given a path?

I used this "AEM SPA Editor - Deep Dive - Part. 1 React" PDF, and on page 19, it shows an old way to do this, but this was from 2018 and I don't even think the same methods exist anymore (namely withAsyncModel). I am using Typescript which has made it a bit harder to re-create from the old methods as well.

Use case: I want to map an AEM SPA Page to a different route (different than its cqPath value) to manually control when and what route it is rendered on. But, I still want the page to be dynamic/authorable when editing.

abhishekanand_ · Accepted Answer

Hi @seanblonien Possible Solution  Manually Fetch the Model via the ModelManager.-You can use the AEM SPA SDK's ModelManager to fetch the JSON model of the AEM page dynamically based on a specific path. Render the AEM Page Component for a Custom Route.-Once you have the page model, you can pass it to your React component and render it using the Page component Use a Router for Handling Routes in React.-you can use react-routerimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

kautuk_sahni · Answer

@seanblonien Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded