在React中动态呈现AEM页面,与URL路径无关



无论SPA React应用程序中的当前URL如何,我都需要能够动态呈现AEM model.json中的任何页面。

我的AEM model.json结构的页面遵循/<country>/<language>/rest/of/path格式,但我希望能够去掉国家/地区/语言,只使用URL路径的其余部分。

当我用如下所需的路径初始化ManagerModel时,我能够做到这一点:

const path = `/path/to/<my_model>.model.json`
/* initialize the ModelManager with the path to the model.json */
ModelManager.initialize({ path })
/* 
grab the desired section of the model and render by calling ReactDOM.render 
By doing this I am able to render the section of the model that maps /us/en/user-account` for 
example, and render the correct content even though the current browser path is  `/`
*/
ModelManager.getData(`/us/en/<page_to_load>`).then(render) 

当我使用history.push(我使用react路由器(处理导航时,我希望能够按照相同的逻辑呈现另一个页面。默认情况下,在执行了ModelManager.getData("/us/en/<page_to_load>")之后,我导航到的每个页面都会呈现模型的相同部分。

为了解决这个问题,我尝试了许多ModelManager.getData()调用的变体,但都没有成功。我唯一能成功的是动态地将下一个页面的路径传递给一个回调函数,该函数在index.js级别上定义,并作为道具传递给App.js。回调会触发另一个ReactDOM.render调用,并正确加载页面,而不管实际的URL路径是什么

<App
reRender={(path) => {
/* manipulate the path so that it properly maps to the correct AEM model data */
const updatedPath = `/us/en/${path}`
/* 
this works, but causes another ReactDOM.render call every time that the current page is 
changed 
*/
ModelManager.getData(updatedPath).then(render) 
}}
/>

还有一些情况下,导航到的页面在modelStore映射中没有相应的路径。我可以这样处理:

const pathToInsert = `/<country>/<language>/${window.location.pathname}.model.json`
ModelManager.modelStore.insertData(pathToInsert)
ModelManager.getData(pathToInsert).then(render)
/* 
I have been having issues with this, but can get the newly inserted model to load properly by 
re-routing back to the current path from the current path 
*/
this.props.history.push(window.location.pathname)

我已经阅读了一遍又一遍这里的文档,但我无法找到正确的方法来做我想做的事情。上述解决方案在大多数情况下都有效,但相当粗糙,我想找到实现这一目标的正确方法。非常感谢您的帮助!

是的,我找到了一个变通的解决方案。不幸的是,AEM库无法开箱即用地处理这一要求。我的解决方案是为我的应用程序组件制作一个包装器。在那个包装器中,我初始化模型管理器,克隆数据并将其存储在本地阶段。然后,您可以有条件地修改模型,并将其作为道具传递给您的应用程序组件。如果您对AEM模型数据的映射方式有很好的了解,那么您应该能够找到显示所需内容的方法。您还可以获取模型并将其插入主模型的":儿童";prop(想那是域名,有一段时间没看了(。

最新更新