AEM SPA React Static Component Initialization

[seanblonien]

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 solution]

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-router
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

[kautuk_sahni]

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