前言

今天我们一起看看react中的编程式导航和匹配模式

---

一、编程式导航

1. 编程式导航

场景：点击登录按钮，登录成功后跳转到首页，该如何实现？ 编程式导航：通过 JS 代码来实现页面跳转

history 是 React 路由提供的，用于获取浏览器历史记录的相关信息 push(path)：跳转到某个页面，参数 path 表示要跳转的路径 go(n)： 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）

class Login extends Component {
  handleLogin = () => {
    // ...
    this.props.history.push('/home')
  }
  render() {...省略其他代码}
}

2. 默认路由

问题：现在的路由都是点击导航菜单后展示的，如何在进入页面的时候就展示呢？ 默认路由：表示进入页面时就会匹配的路由 默认路由path为：/ <Route path="/" component={Welcome} />

二、匹配模式

1. 模糊匹配模式

问题：当 Link组件的 to 属性值为 “/login”时，为什么 默认路由 也被匹配成功？

默认情况下，React 路由是模糊匹配模式 模糊匹配规则：只要Route组件的path属性是Link 组件的to属性的开头，那么Route组件就会匹配成功

代码如下（示例）：

<Link to="/login">登录页面</Link>
<Route path="/" component={Home} /> 匹配成功
// path 代表Route组件的path属性
// pathname 代表Link组件的to属性（也就是 location.pathname）

2. 精确匹配

问题：默认路由任何情况下都会展示，如何避免这种问题？ 给 Route 组件添加 exact 属性，让其变为精确匹配模式 精确匹配：只有当 path 和 pathname 完全匹配时才会展示该路由

代码如下（示例）：

// 此时，该组件只能匹配 pathname=“/” 这一种情况
<Route exact path="/" component=... />

推荐：给默认路由添加 exact 属性。

---

总结

East or west, home is the best.