现在我有一个历史记录模块,它让我甚至可以在反应组件之外使用历史记录:
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
然后我直接在App.jsx中使用这个历史记录
import { Router } from 'react-router-dom';
...
<Router history={history}>...</Router>
我可以在任何地方导入和使用相同的历史对象。即使在任何反应组件之外的自定义助手中也是如此。
这怎么可能在反应路由器6?
由于历史记录被导航取代,我在网上还没有看到任何解决方案。
我知道它仍处于测试阶段,但我想提前检查一下。
感谢您的任何想法!
我最终得到了以下解决方案:
首先,react-router-dom 6 有导航,没有历史记录。最好使用导航来通过路线进行导航:
我创建并修复了我的 History 对象,以便它可以继续使用“push”进行工作,并且我不需要进行大量的返工:
const History = {
navigate: null,
push: (page, ...rest) => History.navigate(page, ...rest),
};
export default History;
然后我制作了自己的组件来设置导航:
import { useNavigate } from 'react-router-dom';
const NavigateSetter = () => {
History.navigate = useNavigate();
return null;
};
然后,在定义默认路由器时,我将设置器作为子项放置:
import { BrowserRouter } from 'react-router-dom';
<BrowserRouter>
<NavigateSetter />
<App />
</BrowserRouter>
之后,您可以使用默认的react-router-dom导航API在任何地方使用History.push或History.navigate。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)