React Router的使用

2020.07.16 - GJX

react-router-dom

yarn add react-router-dom
npm install react-router-dom

Link就像是一个个的路牌,为我们指明组件的位置。Link使用声明式的方式为应用程序提供导航功能,定义的Link最终会被渲染成一个a标签。Link使用to这个属性来指明目标组件的路径,可以直接使用一个字符串,也可以传入一个对象。

import { Link } from 'react-router-dom'
// 字符串参数
<Link to="/query">查询</Link>

// 对象参数
<Link to={{
  pathname: '/query',
  search: '?key=name',
  hash: '#hash',
  state: { fromDashboard: true }
}}>查询</Link>

history.push 这个方法会向history栈里面添加一条新记录,这个时候用户点击浏览器的回退按钮可以回到之前的路径。

history.go 这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)

history.replace 跟 history.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

- END -

14
0

已关闭回复!

HTML5元素拖拽

属性: 事件 dataTransfer对象 拖动开始时,在dataTransfer对象上储存一条文本信息。当拖 […]