无废话快速上手React路由 |
您所在的位置:网站首页 › 电脑上装黑客的代码 › 无废话快速上手React路由 |
以上主要都是通过 react-router-dom 中的 Link 组件来往某个路由组件跳转 但有时,我们需要更灵活的方式进行跳转路由,例如通过调用一个函数,随时随地进行路由跳转,这就叫函数式路由 函数式路由用到的方法有以下 5 个 pushpush 方法就是使页面跳转到对应路径,并在浏览器中留下记录(即可以通过浏览器的回退按钮,返回上一个页面) 举个例子:在路由组件 Home 中设置一个按钮 button ,点击后调用 push 方法,跳转到 /about 页面 import React from 'react'function Home (props) { let pushLink = () => { props.history.push('/about') } return ( 我是Home页面 跳转到about页面 )}export default Homereplacereplace 方法与 push 方法类似,不一样的地方就是,跳转后不会在浏览器中保存上一个页面的记录(即无法通过浏览器的回退按钮,返回上一个页面) 改动一下代码 import React from 'react'function Home (props) { let replaceLink = () => { props.history.replace('/about') } return ( 我是Home页面 跳转到about页面 )}export default HomegoForward调用 goForward 方法,就相当于点击了浏览器的返回下一个页面按钮: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |