Router

yarn add react-router-dom@5

import {BrowserRouter as Router,Route,Link} from 'react-router-dom'

编程式导航

目标：能够按钮的点击事件中跳转路由

内容：

• 场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？
• 编程式导航：通过 JS 代码来实现页面跳转
• 可以通过 useHistory hook 来拿到路由提供的 history 对象，用于获取浏览器历史记录的相关信息。常用操作：
  • push(path)：跳转到某个页面，参数 path 表示要跳转的路径
  • replace(patch)：跳转到某个页面，会替换当前的历史记录
  • go(n)： 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）

import { useHistory } from 'react-router-dom'

const Login = () => {
  const history = useHistory()
  
	const onLogin = () => {
    // ...
    history.push('/home')
  }
  return (
  	<button onClick={onLogin}>登录</button>
  )
}

push(path)和 replace(path) 跳转路由的区别：

浏览器会自动记录访问过来的页面路径，可以简单的把理解为通过一个 数组 来记录的。

比如：我们访问了 3 个页面：['/login', '/home', '/search']，当前所在页面为：'/search'

1. 此时，如果我们又通过 push('/a') 方法访问了一个新页面：'/a'，此时，就相当于往数组中 push 了一条数据，

   • 那么，访问该页面后，浏览器中的记录为：['/login', '/home', '/search', '/a']

2. 此时，如果我们又通过 replace('/a') 方法访问了一个新页面：'/a'，此时，就相当于把当前页面地址，替换为 '/a'

   • 那么，访问该页面后，浏览器中的记录为：['/login', '/home', '/a']