在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则路由改变了,但是页面不会跳转。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)