码迷,mamicode.com
首页 > 其他好文 > 详细

react函数式组件(非路由组件)实现路由跳转

时间:2020-03-28 01:02:44      阅读:465      评论:0      收藏:0      [点我收藏+]

标签:Route组件   key   blank   string   tor   handle   router   ops   cli   

个人理解:

 <Route exact path="/Home" component={Home}/>
 1.路由组件:只有包裹在Route组件里的才能使用`this.props.location`,
 2.非路由组件:假如有个需求,是面包屑或者导航组件里需要拿到`this.props.location`(导航组件或者面包屑一般不会包裹在`Route`里吧),那么直接这么写显然就不行了。
 这个时候`withRouter`修饰一下,就可以这么写了。

 

useHistory

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

技术图片

文档在这里

 

 

 

 

 

.

react函数式组件(非路由组件)实现路由跳转

标签:Route组件   key   blank   string   tor   handle   router   ops   cli   

原文地址:https://www.cnblogs.com/jianxian/p/12585340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!