反应路由器5.1.0如何使用使用历史记录实现页面跳转导航，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
1.使用withRouter组件
带路由器组件将注入历史对象作为该组件的属性
importReactfrom’react ‘
从“react-router-dom”导入{带路由器}
从安特德导入{按钮}
使用路由器导出常量按钮=使用路由器(({ history })={ 0
console.log(‘历史记录，历史记录)
返回（
纽扣
type=’default ‘
onClick={()={ history。推送(‘/new-location ‘)} }
点击我！
/按钮
)
})
引入从””导入{ ButtonWithRouter } ./buttonWithRouter ‘
或者：
constButtonWithRouter=(道具)={ 0
console.log(‘道具，道具)
返回（
纽扣
type=’default ‘
onClick={()={ props。历史。位置。推送(‘/new-location ‘)} }
点击我！
/按钮
)
}
导出默认路由器（按钮路由器)
引入：从路由器导入按钮/buttonWithRouter ‘
2、使用Route标签
在途径入口
途径组件不仅用于匹配位置。您可以渲染无路径的路由，它始终与当前位置匹配路线组件传递与带路由器相同的属性，因此能够通过历史的属性访问历史的方法。
so:
export constructonthreader=()=(
路由器ender={({ history })={ 0
console.log(‘历史记录，历史记录)
返回（
按钮
type=’button ‘
onClick={()={ history。推送(‘/new-location ‘)} }
点击我！
/按钮
)
}}/
)9503.163.com
React Router 5.1.0使用useHistory
从React Router v5.1.0开始，新增了使用历史记录钩子（钩子),如果是使用React 16.8.0，使用使用历史记录即可实现页面跳转
export constructonthreader=()={ 0
const history=useHistory()；
console.log(‘历史记录，历史记录)
返回（
按钮
type=’button ‘
onClick={()={ history。推送(‘/new-location ‘)} }
点击我！
/按钮
)
}
关于反应路由器5.1.0如何使用使用历史记录实现页面跳转导航问题的解答就分享到这里了，希望
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/86570.html