import { registerRouter } from './routing';

// App — это корневой компонент вашего приложения.
class App extends Component {
  static contextTypes = {
    router: PropTypes.shape({
      createHref: PropTypes.func.isRequired,
      push: PropTypes.func.isRequired,
    }).isRequired,
  }

  constructor(...args) {
    super(...args);

    // Поделитесь маршрутизатором с приложением, не требуя React или контекста.
    registerRouter(this.context.router);
  }
}

ReactDOM.render(
  <Router history={history}>
    <Route path="/" component={App} />,
  </Router>,
  appRoot
)

componentDidUpdate() {
  // Вы можете добавить сюда некоторые условия, чтобы исключить эту логику из производственной сборки, например, `if (process.env.NODE_ENV !== 'production' && module.hot)`
  this.registerRouter();
}

import { registerRouter } from './routing';

// App — это корневой компонент вашего приложения.
class App extends Component {
  static contextTypes = {
    router: PropTypes.shape({
      history: PropTypes.shape({
        push: PropTypes.func.isRequired,
        createHref: PropTypes.func.isRequired
      }).isRequired
    }).isRequired
  }

  constructor(...args) {
    super(...args);

    // Поделитесь маршрутизатором с приложением без использования React или контекста.
    registerRouter(this.context.router);
  }
}

// <App> *должен* быть дочерним элементом <Router>, потому что <App> зависит от контекста, предоставленного <Router>
ReactDOM.render(
  <Router>
    <App />,
  </Router>,
  appRoot
)

// routing.js

import { createLocation } from 'history';

const isModifiedEvent = event => !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);

const isLeftClickEvent = event => event.button === 0;

let router;
export const registerRouter = reactRouter => {
  router = reactRouter;
};

/**
 * Логика генерации href и обработчиков onClick из свойства `to` в значительной степени заимствована из
 * https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js.
 */
export const getRouterLinkProps = to => {
  const location = typeof to === "string"
    ? createLocation(to, null, null, router.history.location)
    : to;

  const href = router.history.createHref(location);

  const onClick = event => {
    if (event.defaultPrevented) {
      return;
    }

    // Если установлен атрибут target (например, для "_blank"), пусть браузер обрабатывает ссылку.
    if (event.target.getAttribute('target')) {
      return;
    }

    if (isModifiedEvent(event) || !isLeftClickEvent(event)) {
      return;
    }

    // Предотвратить обычное поведение ссылки, которое вызывает обновление браузера.
    event.preventDefault();
    router.history.push(location);
  };

  return {href, onClick}
};