react-router 6 and effector

history.ts

import { createBrowserHistory } from "history";

export const browserHistory = createBrowserHistory();

model.ts

import {
  createEffect,
  Event,
  sample,
} from "effector";
import { browserHistory } from "lib/history";

export const redirectFx = createEffect((path: string) =>
  browserHistory.push(path)
);

export function redirect(event: Event<any>, path: string) {
  sample({
    clock: event,
    fn: () => path,
    target: redirectFx,
  });
}

with-router.tsx

import { Router } from "react-router-dom";
import React, { createElement, useLayoutEffect, useRef, useState } from "react";
import { browserHistory } from "lib/history";
import { BrowserHistory } from "history";

function BrowserRouter(_ref: any) {
  let { basename, children } = _ref;
  let historyRef = useRef<BrowserHistory>();

  if (historyRef.current == null) {
    historyRef.current = browserHistory;
  }

  let history = historyRef.current;
  let [state, setState] = useState({
    action: history!.action,
    location: history!.location,
  });
  useLayoutEffect(() => history.listen(setState), [history]);
  return createElement(Router, {
    basename: basename,
    children: children,
    location: state.location,
    navigationType: state.action,
    navigator: history,
  });
}

export const withRouter = (component: () => React.ReactNode) => () =>
  (
    <BrowserRouter>{component()}</BrowserRouter>
  );