React Router Dom v6.4 не разрешает history.listen (предыдущие предложения устарели) с помощью createBrowserRouter или createMemoryRouter

react-router-dom v. 6.4.2 не разрешает history.listen, как указано в приведенном ниже примере кода. Это для mfe с федерацией модулей.

В примере кода с использованием history.listen, если щелкнуть ссылку на удаленном устройстве (загруженном как mfe), то текущий путь истории памяти (теперь маршрутизатор памяти) будет обновлен. Затем он вызовет onNavigate, чтобы сообщить хост-контейнеру, который использует историю браузера (теперь маршрутизатор браузера), что текущий путь изменился.

Предыдущие предложения заключались в использовании UNSAFE_NavigationContext, useHistory, нестабильной_HistoryRouter, импорте {...} из «истории» и т. д. По-видимому, эти предыдущие методы были временными средствами миграции с версии 5 на версию 6.3, а с версией 6.4+ теперь устарели. новых API данных в 6.4. Смотрите здесь

мы не собираемся поддерживать пользовательские истории в будущем. Этот API находится здесь в качестве помощи при миграции. Мы рекомендуем удалить пользовательские истории из вашего приложения.

Дополнительно от сопровождающих RRD:

Мы рекомендуем обновить ваше приложение, чтобы использовать один из новых маршрутизаторов версии 6.4.

После поиска здесь, а также в открытых и закрытых проблемах на remix-RRD я не смог найти работающее решение, основанное на вышеизложенном, для замены history.listen, .push или .location на новые API данных (маршрутизаторы) с использованием createBrowserRouter или createMemoryRouter, как указано здесь

На странице react-router-dom есть много открытых вопросов, касающихся этого варианта использования.

Оригинальный marketing/src/bootstrap.tsx с удаленного компьютера

import React from 'react'
import { createRoot } from 'react-dom/client'
import { createMemoryHistory, createBrowserHistory } from 'history' <= Not Supported
import App from './App'

let root: { render: (arg0: JSX.Element) => void } | null = null

// Mount function to start up the app
const mount = (el: any, { onNavigate, defaultHistory, initialPath }: any) => {
  if (!el) {
    root = null
    return
  }
  // If defaultHistory in development and isolation use BrowserHistory
  const history =
    defaultHistory ||
    // Otherwise use MemoryHistory and initial path from container
    createMemoryHistory({
      initialEntries: [initialPath],
    })

  if (onNavigate) {
    history.listen(onNavigate)                  <= Not Supported
  }

  root = root ? root : createRoot(el)

  root.render(<App history = {history} />)

  return {
    onParentNavigate({ pathname: nextPathname }: any) {
      const { pathname } = history.location      <= Not Supported

      if (pathname !== nextPathname) {
        history.push(nextPathname)               <= Not Supported
      }
    },
  }
}

// If we are in development and in isolation,
// call mount immediately
if (process.env.NODE_ENV === 'development') {
  const devRoot = document.querySelector('#_marketing-dev-root')

  if (devRoot) {
    mount(devRoot, { defaultHistory: createBrowserHistory() })
  }
}

// We are running through container
// and we should export the mount function
export { mount }

Замена marketing/src/bootstrap.tsx с удаленного сервера (в процессе)

import React from 'react'
import { createRoot } from 'react-dom/client'
import {
  createBrowserRouter,
  createMemoryRouter,
} from 'react-router-dom'

import App from './App'

import ErrorPage from './pages/ErrorPage'

import Landing from './components/Landing'
import Pricing from './components/Pricing'

let root: { render: (arg0: JSX.Element) => void } | null = null

const routes = [
  {
    path: '/',
    errorElement: <ErrorPage />,
    children: [
      {
        index: true,
        element: <Landing />,
        errorElement: <ErrorPage />,
      },
      {
        path: 'pricing',
        element: <Pricing />,
        errorElement: <ErrorPage />,
      },
    ],
  },
]

// Mount function to start up the app
const mount = (
  el: Element,
  {
    onNavigate,
    defaultRouter,
  }: {
    onNavigate: (() => void) | null
    defaultRouter: any
  },
): unknown => {
  if (!el) {
    root = null
    return
  }
  // if in development and isolation, use browser router. If not, use memory router
  const router = defaultRouter || createMemoryRouter(routes)

  if (onNavigate) {
    router.listen(onNavigate) // There is no history.listen anymore.  router.listen is not a function
  }

  root = root ? root : createRoot(el)
  
  root.render(<App router = {router} />)
}

// If we are in development and in isolation,
// call mount immediately
if (process.env.NODE_ENV === 'development') {
  const devRoot = document.querySelector('#_marketing-dev-root')

  if (devRoot) {
    mount(devRoot, { defaultRouter: createBrowserRouter(routes) })
    console.info('defaultRouter')
  }
}

// We are running through container
// and we should export the mount function
export { mount }

Оригинальный marketing/src/App.tsx с удаленного доступа

import './MuiClassNameSetup'
import React from 'react'
import { Switch, Route, Router } from 'react-router-dom'
import Landing from './components/Landing'
import Pricing from './components/Pricing'

export default function _({ history }: any) {
  return (
    <div>
      <Router history = {history}>
        <Switch>
          <Route exact path = "/pricing" component = {Pricing} />
          <Route path = "/" component = {Landing} />
        </Switch>
      </Router>
    </div>
  )
}

Замена marketing/src/App.tsx удаленно (в процессе)

import './MuiClassNameSetup'
import React from 'react'
import {
  RouterProvider,
} from 'react-router-dom'

export default function App({ router }: any) {
  return <RouterProvider router = {router} />
}

Исходный контейнер/src/components/MarketingApp.tsx с хоста

import { mount } from 'marketing/MarketingApp'
import React, { useRef, useEffect } from 'react'
import { useHistory } from 'react-router-dom'   <= Not Supported

export default function _() {
  const ref = useRef(null)
  const history = useHistory()                  <= Not Supported

  useEffect(() => {
    const { onParentNavigate } = mount(ref.current, {
      initialPath: history.location.pathname,
      onNavigate: ({ pathname: nextPathname }: any) => {
        const { pathname } = history.location   <= Not Supported

        if (pathname !== nextPathname) {
          history.push(nextPathname)            <= Not Supported
        }
      },
    })

    history.listen(onParentNavigate)            <= Not Supported
  }, [history])

  return <div ref = {ref} />
}

Замена container/src/components/MarketingApp.tsx с хоста (в процессе)

import { mount } from 'marketing/MarketingApp'
import React, { useRef, useEffect } from 'react'

export default function _() {
  const ref = useRef(null)

  useEffect(() => {
    mount(ref.current, {
      onNavigate: () => {
        console.info('The container noticed navigation in Marketing')
      },
    })
  })

  return <div ref = {ref} />
}

Ищете решение для замены history.listen, history.location и history.push, которое работает с новыми API данных v6.4?