Как я могу изменить маршруты в React в ответ на событие сообщения окна?

Question

У меня есть приложение React, которое предназначено для встраивания в другое нереагирующее приложение. Он находится в iframe на главной странице приложений. Приложение реагирует на использование реакции-маршрутизатора (5.0.0) и реагирует на маршрутизатор-роут (5.1.0). В приложении реагирования, когда кто-то нажимает навигационную ссылку, я запускаю:

window.parent.postMessage(window.location.pathname,"*");

что я могу сделать так, чтобы URL-адреса родительских сайтов совпадали с таковыми в iframe. Я также привязал событие onpopstate родительского окна, чтобы при нажатии на него можно было захватить кнопку возврата браузера, а затем запустить:

iframe.contentWindow.postMessage(new_url, '*');

Идея заключается в том, что в React приложение, которое я буду прослушивать для этого сообщения, а затем вручную направлять его в нужное место, чтобы синхронизировать родительский элемент и iframe при нажатии кнопки «назад» c.

Я подтвердил, что при использовании кнопки возврата Кнопка, на самом деле я получаю сообщение в iframe, однако я запутался в том, как лучше всего запустить этот маршрут. На данный момент я поместил прослушиватель событий в элемент root следующим образом:

import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { push } from 'react-router-redux';
import Wizard from '../Wizards';

const Root = (props) => {
  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

  // Listen to message from child window
  eventer(messageEvent,function(e) {
    console.log(e);
    console.log('props');

    console.log(props);
    //props.store.dispatch(push('/broadcast_wizard/step1'));
    //Router.push('/broadcast_wizard/step1');
    //this.context.history.push('/broadcast_wizard/step1');
    console.log('why?');

  },false);

  return (
    <Provider store={props.store}>
      <Router>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"/>
        <Switch>
          <Route path="/broadcast_wizard/:step" component={Wizard} />
          <Route path="/:filter?">
            Root page
          </Route>
        </Switch>
      </Router>
    </Provider>
  );
};

export default Root;

В вышеприведенных примерах я включил (закомментировал) все, что я до сих пор пробовал, которые потерпели неудачу. Пожалуйста, помогите, новичок в React, но многолетний опыт JavaScript.

Answer 1

Нужно ли рендерить приложение React в iframe? Вы изучали возможность установки на другом элементе root? Это может упростить задачу

Что-то вроде:

ReactDOM.render(
  <App/>,
  document.getElementById('react-root') as HTMLElement
)