Отображать страницы AEM в React динамически независимо от пути URL - PullRequest
Новая
       46

Отображать страницы AEM в React динамически независимо от пути URL

1 голос
/ 21 февраля 2020

У меня должна быть возможность отображать любую страницу в моей модели AEM. json динамически, независимо от текущего URL-адреса в приложении SPA React.

Моя модель AEM. 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 (я использую реагирующий маршрутизатор), я хочу иметь возможность отображать другую страницу, следуя той же логике c. По умолчанию, выполнив ModelManager.getData("/us/en/<page_to_load>"), каждая страница, на которую я перехожу, затем отображает ту же часть модели.

Чтобы это исправить, я пробовал множество вариантов вызовов ModelManager.getData(), но безуспешно. Единственное, с чем я смог добиться успеха - это динамически передать путь к следующей странице для рендеринга в функцию обратного вызова, которая определена на уровне индекса. 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)

Я прочитал и перечитал документацию здесь , и я не могу найти правильный способ сделать то, что я хочу делать. Вышеуказанные решения работают по большей части, но довольно хакерские, и я хотел бы найти правильный способ сделать это. Любая помощь с благодарностью!

...