从非反应 class 使用反应路由器

Question

我的应用程序中有一个经理 class，它只是一个普通的 JS class，它纯粹是合乎逻辑的，没有视图。 我在我的几个组件中使用了它的一个实例。 对于其中一项操作，我希望它可以更改基于 React 的应用程序中的路线。 我知道我可以向每个组件返回一些东西，然后让组件进行路由，但我想知道是否有办法从我的非反应 class 中做到这一点。 有没有办法通过历史 object 并将新路线推向它？

谢谢你的帮助。

编辑：这更像是一个理论/方法问题，但例如：经理 class：

class MyManagerClass {
 constructor() {
    this.data = {...some internal data};
}

doSomething(param) {
    if(this.data[param]) {
        this.data[param]();
    } else {
        //here i'd like to change the route in my react app
    }
}
}

零件：

import React, {useContext, useEffect, useRef, useState} from "react";

const MyComponent = props => {
const myManagerClass = new MyManagerClass();

useEffect(() => {
    myManagerClass.doSomething('param');
}, [props.something]);

return (
    <div>Component</div>
)
}

Answer 1

至少有2个解决方案

解决方案 1：

您可以将历史 object 作为组件的参数传递给操作

class Util {

  static someAction(history) {
      history.push('/someurl');
  }
}

并称它为

const Comp = () => {
   const history = useHistory();
   const someHandler = () => {
       Util.someAction(history);
   }
   ...
}

解决方案 2：

为路由器使用自定义历史记录，然后您可以将历史记录直接导入 class 文件

历史.js

import {createBrowserHistory}  from 'history';
export const history = createBrowserHistory();

将它用于路由器，例如

import { Router } from 'react-router-dom';
import { history } from './path/to/history';
...

return (
  <Router history={history}>{/* Routes here */}</Router>
)

然后在您的 Class 文件中

import {history} from '/path/to/history';


class Util {

  static someAction() {
      history.push('/someurl');
  }
}