从非反应类中使用反应路由器

Question

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

感谢您的帮助。

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

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：

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

class Util {

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

然后这样称呼它

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

解决方案 2：

为Router使用自定义历史，然后你可以直接将历史导入到类文件中

history.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');
  }
}