如何在react router v6中为Navigate制作包装函数

Question

我使用的是react-routerv5，我想升级到v6。有一个问题：我有很多组件，里面使用useHistory，但我不想把它们一个接一个地更改为useNavigate，而不是我想在react-routerv6中为navigate(history(编写一个助手函数，然后使用那个助手(包装器(函数。

问题是：如何在react-routerv6中为useNavigate编写助手函数？

Answer 1

如果您想要提供一个自定义导航实用程序，那么您可能需要创建一个自定义React挂钩；"包装"；react-router提供的钩子之一，并返回所需的函数。不幸的是，react-router@6并没有直接公开history对象，而且history对象和navigate函数之间也没有1对1的关系。不过，您可以涵盖大多数常见的用例。我建议坚持"；普通API"；符合您的需求。

RRDv5示例

import { useHistory } from 'react-router';
const useMyNavigation = () => {
const history = useHistory();
const push = React.useCallback((to, state) => history.push(to, state), []);
const replace = React.useCallback((to, state) => history.replace(to, state), []);
const go = React.useCallback((delta) => history.go(delta), []);
const back = React.useCallback(() => history.back(-1), []);
const forward = React.useCallback(() => history.go(1), []);
return {
back
forward,
go,
push,
replace
};
};

RRDv6示例

import { useNavigate } from 'react-router';
const useMyNavigation = () => {
const navigate = useNavigate();
const push = React.useCallback((to, state) => navigate(to, { state }), []);
const replace = React.useCallback((to, state) => navigate(to, { replace: true, state }), []);
const go = React.useCallback((delta) => navigate(delta), []);
const back = React.useCallback(() => navigate(-1), []);
const forward = React.useCallback(() => navigate(1), []);
return {
back
forward,
go,
push,
replace
};
};

备选RRDv6示例

现在，当我说RRDv6不直接公开history对象时，这并不是完全正确的。它不直接导出history对象，但它通过UNSAFE_NavigationContext上下文导出包含它的React上下文。有了它，可以获得对navigator函数的引用，该函数是history@5history对象(与RRDv5使用的history@4相反(。请注意，这可能需要将history@5(与react-router@6使用的版本相同(列为项目依赖项。参见history@5导航。

import { useContext } from 'react';
import { useNavigate } from 'react-router';
const useMyNavigation = () => {
const navigator = useContext(UNSAFE_NavigationContext).navigator;
const push = React.useCallback((to, state) => navigator.push(to, state), []);
const replace = React.useCallback((to, state) => navigator.replace(to, state), []);
const go = React.useCallback((delta) => navigator.go(delta), []);
const back = React.useCallback(() => navigator.back(-1), []);
const forward = React.useCallback(() => navigator.go(1), []);
return {
back
forward,
go,
push,
replace
};
};