React Router 如何使用history跳转的实现_React

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

2022-02-24 16:23香辣素毛肚 React

这篇文章主要介绍了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;}

									}