reactjs - 在 React 中独立于 URL 路径动态呈现 AEM 页面

Question

我需要能够动态呈现我的 AEM model.json 中的任何页面，而不管 SPA React 应用程序中的当前 URL。

我的 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-router)，我希望能够按照相同的逻辑呈现另一个页面。默认情况下，已执行 ModelManager.getData("/us/en/<page_to_load>") ，然后我导航到的每个页面都会呈现模型的相同部分。

为了解决这个问题，我尝试了 ModelManager.getData() 的多种变体。调用没有成功。我唯一能够取得成功的是动态地将路径传递到下一页以呈现给在 index.js 级别上定义并作为 Prop 传递给 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)

我已阅读并重新阅读文档 here而且我无法找出正确的方法来做我想做的事。上面的解决方案在大多数情况下都有效，但是很老套，我想找出实现这一目标的正确方法。非常感谢任何帮助!

Answer 1

是的，我找到了解决方案。遗憾的是，AEM 库无法开箱即用地处理此要求。我的解决方案是为我的 App 组件制作一个包装器。在那个包装器中，我初始化模型管理器，克隆数据并将其存储在本地阶段。然后您可以有条件地修改模型并将其作为 Prop 传递给您的 App 组件。如果您对 AEM 模型数据的映射方式有很好的了解，您应该能够想出一种方法来显示您想要的内容。您还可以获取模型并将其插入到主模型的“:children”属性中(认为这是字段名称，有一段时间没看过了)。