history.listen()替换react路由器V6

Question

我正在将react路由器V5应用程序升级为react路由器v6。我遇到了一些片段，我无法将其转换为V6。我尝试了足够多，并在互联网上寻找不同的解决方案，但似乎没有什么对我有效。

我想转换为V6，的代码

import React, { useRef, useEffect } from "react";
import { useHistory } from "react-router-dom"; 
export default () => {
const ref = useRef(null);
const history = useHistory(); // the browser history object  

useEffect(() => {
const { onParentNavigate } = mount(ref.current, {
onNavigate: ({ pathname: nextPathname }) => {
const { pathname } = history.location;                 
if (pathname !== nextPathname) {
history.push(nextPathname); //<<<<< how to convert this to v6 ?
}
},
});

history.listen(onParentNavigate); //<<<<<< how to convert this to v6 ?
}, []);

return <div ref={ref} />;
};

使用V6的MyVersion

const ref = useRef(null);
//  const navigation = useContext(UNSAFE_NavigationContext).navigator as BrowserHistory();
const navigate = useNavigate(); // V6
const location = useLocation(); // V6
useEffect(() => {
const { onParentNavigate } = dashboardMount(ref.current, {
onNavigate: (result: any) => {
const { pathname } = location;
if (pathname !== result.location.pathname) {
navigate(result.location.pathname, { replace: true }); // This is not throwing any error but not giving expected outcome
}
}
})
navigate(onParentNavigate); // This not throwing any error but not giving me expected outcome as well
}, []);
return <div ref={ref}></div>

我们将高度赞赏任何指针或解决方案

Answer 1

您可能会使用从react-router-dom导出的UNSAFE_NavigationContext来访问原始"；历史"；navigator对象。

///////////////////////////////////////////////////////////////////////////////
// DANGER! PLEASE READ ME!
// We provide these exports as an escape hatch in the event that you need any
// routing data that we don't provide an explicit API for. With that said, we
// want to cover your use case if we can, so if you feel the need to use these
// we want to hear from you. Let us know what you're building and we'll do our
// best to make sure we can support you!
//
// We consider these exports an implementation detail and do not guarantee
// against any breaking changes, regardless of the semver release. Use with
// extreme caution and only if you understand the consequences. Godspeed.
///////////////////////////////////////////////////////////////////////////////
/** @internal */
export {
UNSAFE_NavigationContext,
UNSAFE_LocationContext,
UNSAFE_RouteContext,
} from "react-router";

示例：

import React, { useContext, useRef, useEffect } from "react";
import { UNSAFE_NavigationContext } from "react-router-dom";
export default () => {
const ref = useRef(null);
const { navigator } = useContext(UNSAFE_NavigationContext); // the browser history object  

useEffect(() => {
const { onParentNavigate } = mount(ref.current, {
onNavigate: ({ pathname: nextPathname }) => {
const { pathname } = navigator.location;                 
if (pathname !== nextPathname) {
navigator.push(nextPathname);
}
},
});

const unlisten = navigator.listen(onParentNavigate);
return unlisten; // <-- cleanup listener on component unmount
}, []);

return <div ref={ref} />;
};