React路由+1-CFANZ编程社区

React路由-执行过程

切换页面时，执行过程如下：

点击 Link 组件（a标签），修改了浏览器地址栏中的 url
React 路由监听到地址栏 url 的变化 hashchange popstate
React 路由内部遍历所有 Route 组件，使用路由规则（path）与 pathname（hash）进行匹配
当路由规则（path）能够匹配地址栏中的 pathname（hash）时，就展示该 Route 组件的内容

默认情况下,可以同事匹配多个路由,只要匹配成功,该路由组件对应的内容就会渲染到页面中

Switch 组件：包裹 Route 组件，只会渲染第一个匹配的组件，即使有多个路由都可以匹配成功

在实际开发时，通常会用 Switch 组件包裹 Route 组件

通过 Switch 组件非常容易的就能实现 404 页面功能

<Switch>
  <Route exact path="/">
  	<Home />
  </Route>
  <Route path="/about">
  	<About />
  </Route>
  <Route path="/user">
  	<User />
  </Route>
  // 即使这个也可以匹配成功 /user/a 但是因为 Switch 组件的存在，这个路由对应的组件内容是不会渲染的
  <Route path="/user/a">
  	<User1 />
  </Route>

	{/* 以上路由规则全都不匹配时，展示 404 页面 */}
  {/* 注意：这个路由需要放在最后，兜底 */}
  <Route>
  	<NoMatch />
  </Route>
</Switch>

React路由-编程式导航

场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？
编程式导航：通过 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'

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

那么，访问该页面后，浏览器中的记录为：['/login', '/home', '/search', '/a']
此时，如果我们又通过 replace('/a') 方法访问了一个新页面：'/a'，此时，就相当于把当前页面地址，替换为 '/a'

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