react-router-dom v6 组件外使用路由跳转

在 react-router v4 之后，在组件之外使用路由必须通过 createBrowserHistory 或 createHashHistory 方法返回的 history 实例，并传入给 Router 组件，替换掉原本的 BrowserRouter/HashRouter 包裹组件。

然而在 最新的 v6（超强劲破坏性版本） 版本中，这种方法依然不可取（url 变化但是页面不变），除了上述所说之外，同时还需要监听 history 的变化，手动重新渲染页面。

自定义外层 Router 组件

src/router/history.ts

import React from 'react';
import { createBrowserHistory } from 'history';
import { Router } from 'react-router-dom';

export const history = createBrowserHistory();

interface HistoryRouterProps {
  history: typeof history;
}

export const HistoryRouter: React.FC<HistoryRouterProps> = ({ history, children }) => {
  const [state, setState] = React.useState({
    action: history.action,
    location: history.location
  });

  React.useLayoutEffect(() => {
    history.listen(setState);
  }, [history]);

  return React.createElement(Router, Object.assign({ children, navigator: history }, state));
};

使用自定义 HistoryRouter

src/index.tsx

import ReactDOM from 'react-dom';
import App from './App';
import { history, HistoryRouter } from 'router/history';

ReactDOM.render(
  <HistoryRouter history={history}>
    <App />
  </HistoryRouter>,
  document.getElementById('root')
);

在任意 react 组件之外的地方，导入 history 对象以使用

import { history } from 'router/history';

history.push('/');
// history.replace('/')