React Router 如何利用history跳转的实现

这篇文章主要先容了React Router 如何利用history跳转的实现，文中通过示例代码先容的很是具体，对各人的进修可能事情具有必然的参考进修代价，需要的伴侣们下面跟着小编来一起进修进修吧

在react-router中组件内里的跳转可以用<Link>

可是在组件外面改如何跳转，需要用到react路由的history

replace要领和push要领利用形式一样，replace的浸染是代替当前汗青记录
go，此要领用来前进可能倒退，history.go(-1);
goBack，此要领用往返退，history.goBack();
goForward，此要领用来前进，history.goForward();

1.hook

import {useHistory} from 'react-router-dom'; function goPage(e) { history.push({ pathname: "/home", state: {id: 1} }); }

pathname是路由地点，state可以传参

获取参数：

import {useLocation} from 'react-router-dom'; function getParams(){ let location = useLocation(); let id = location.state.id; }

2.class组件

import React from 'react'; import {createBrowserHistory} from "history"; class App extends React.Component{ constructor(props) { super(props); } goPage() { let history = createBrowserHistory() history.push({ pathname: "/home", state: {id: 1} }); history.go(); } render() {return null;} }

假如不挪用history.go则路由改变了，可是页面不会跳转。

到此这篇关于React Router 如何利用history跳转的实现的文章就先容到这了,更多相关React Router history跳转内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！

您大概感乐趣的文章: