跳到主要内容位置

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

· 预计阅读时间:2 分钟

react-router v4 之后,在组件之外使用路由必须通过 createBrowserHistorycreateHashHistory 方法返回的 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('/')