React-router v6在Class组件和非组件代码中的正确使用-牛翰网

在封装的request等非组件代码中如何使用 history 进行路由？

1. history路由用法

将 createBrowserHistory() 创建的 history 与新的 unstable_HistoryRouter API进行上下文绑定

注意：

在 v6 版本中如果不对上下文进行绑定直接使用 createBrowserHistory() 创建的 history 进行编程式路由操作

将出现路由变化 UI 不变化的问题，hash 和 history 模式同理。

import { createBrowserHistory } from 'history';
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';

let history = createBrowserHistory();

function App() {
  return (
    <HistoryRouter history={history}>
      // The rest of your app
    </HistoryRouter>
  );
}

history.push("/foo");

2. hash路由用法

import HashHistory from 'history/hash';
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';

function App() {
  return (
    <HistoryRouter history={HashHistory}>
      // The rest of your app
    </HistoryRouter>
  );
}

history.push("/foo");

项目升级了v6版本，怎么兼容旧的Class组件？

使用新的 hooks API封装高阶组件包裹 class 组件进行 props 的传递

import {
  useLocation,
  useNavigate,
  useParams,
} from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}

// class components
@withRouter()
class YouClassComponent extends React.Component {}
export default YouClassComponent

// or

class YouClassComponent extends React.Component {}
export default withRouter(YouClassComponent)