React Router: диалог браузера getUserConfirmation - PullRequest
Новая
       8

React Router: диалог браузера getUserConfirmation

0 голосов
/ 15 февраля 2019

У меня есть пользовательский компонент BrowserRouter, потому что мне нужен доступ к экземпляру истории из компонента React, поэтому я создал его следующим образом:

OwnBrowserRouter.js 

import { BrowserRouter } from "react-router-dom"
import { createBrowserHistory } from "history"

export const history = createBrowserHistory()

export default class OwnBrowserRouter extends BrowserRouter {
  history = history
}

Затем я использую этот компонент OwnBrowserRouter в своем приложении и передаю компонент getUserConfirmation с пользовательским модом:

App.js 

<OwnBrowserRouter getUserConfirmation={getUserConfirmation}> ... </>

getUserConfirmation.js 

const getUserConfirmation = (message, callback) => {
  const modal = document.createElement("div")
  document.body.appendChild(modal)

  const withCleanup = answer => {
    ReactDOM.unmountComponentAtNode(modal)
    document.body.removeChild(modal)
    callback(answer)
  }

  ReactDOM.render(
    <ConfirmModal
      open={true}
      type={MODAL.TYPE.CANCEL}
      handleClose={() => withCleanup(false)}
      handleConfirm={() => withCleanup(true)}
      title="Are you sure?"
      text={message}
    />,
    modal
  )
}

export default getUserConfirmation

Тогда я (конечно) где-то рендерирую <Prompt> компонент ... Главная проблема в том, что он работает с origin BrowserRouterимпортируется из react-router-dom, но всякий раз, когда я переключаюсь на OwnBrowserRouter, он начинает отображать уродливое диалоговое окно браузера (не мой модальный стиль).

1 Ответ

0 голосов
/ 15 февраля 2019

Для всех, кто интересуется ответом, getUserConfirmation на самом деле является историческим API, поэтому решение 

export const history = createBrowserHistory({ getUserConfirmation })
...