无废话快速上手React路由

您所在的位置:网站首页 电脑上装黑客的代码 无废话快速上手React路由

无废话快速上手React路由

#无废话快速上手React路由| 来源: 网络整理| 查看: 265

以上主要都是通过 react-router-dom 中的 Link 组件来往某个路由组件跳转

但有时,我们需要更灵活的方式进行跳转路由,例如通过调用一个函数,随时随地进行路由跳转,这就叫函数式路由

函数式路由用到的方法有以下 5 个

push

push 方法就是使页面跳转到对应路径,并在浏览器中留下记录(即可以通过浏览器的回退按钮,返回上一个页面)

举个例子:在路由组件 Home 中设置一个按钮 button ,点击后调用 push 方法,跳转到 /about 页面

import React from 'react'function Home (props) { let pushLink = () => { props.history.push('/about') } return ( 我是Home页面 跳转到about页面 )}export default Homereplace

replace 方法与 push 方法类似,不一样的地方就是,跳转后不会在浏览器中保存上一个页面的记录(即无法通过浏览器的回退按钮,返回上一个页面)

改动一下代码

import React from 'react'function Home (props) { let replaceLink = () => { props.history.replace('/about') } return ( 我是Home页面 跳转到about页面 )}export default HomegoForward

调用 goForward 方法,就相当于点击了浏览器的返回下一个页面按钮:

531227a37f86df570ae8242cc20a9cf9.png



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3