React 路由基础

React 路由介绍

现在的前端应用大多都是 SPA (单页面应用程序 ) , 也就是只有一个HTML 页面的应用程序 , 因为它的用户体验更好 , 对服务器的压力更小 , 所以更受欢迎 . 为了有效的使用单个页面来管理原来多页面的功能 , 前端路由应运而生

• 前端路由的功能: 让用户从一个视图 (页面) 导航到另一个视图 (页面)
• 前端路由是一套映射规则 , 在React中 , 是 URL路径 与 组件 的对应关系
• 使用React路由简单来说就是配置路径和组件(配对)

使用步骤

1.安装 

npm i react-router-dom

2.导入路由的三个核心组件:Router / Route / Link

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

3. 使用 Router 组件 包裹整个应用 ( 重要 )

<Router>
  <div className="App">
      // ...省略内容
  </div>
</Router>

4. 使用 Link 组件 作为导航菜单 ( 路由入口 )

<Link to="/first">页面一</Link>

5. 使用 Route 组件 配置路由规则和要展示的组件 ( 路由出口 )
 

<Route path="/first" component={First}></Route>

 常用组件说明

• Router 组件: 包裹整个应用 , 一个 React 应用只需要使用一次
• 两种常用Router: HashRouter 和 BrowserRouter
• HashRouter: 使用URL的哈希值实现 ( loacalhost:3000/#/first)
• (推荐) BrowserRouter : 使用 H5 的history API 实现 ( localhost:3000/first)
• Link 组件: 用于指定导航链接 (a 标签)

路由执行过程

1. 点击Link组件 (a标签) , 修改了浏览器地址中的url
2. React路由监听到地址栏url的变化
3. React 路由内部遍历所有 Route 组件 , 使用路由规则 ( path ) 与pathname 进行匹配
4. 当路由规则( path ) 能够匹配地址栏中的 pathname 时 , 就展示该 Route 组件的内容

编程式导航

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

  • class Login extends Component {
      handleLogin = () => {
      // ...
      this.props.history.push('/home')
      }
      render(){}
    }

• history 是 React 路由提供的 , 用于获取浏览器历史记录的相关信息

• push (path) : 跳转到某个页面 , 参数 path 表示要跳转的路径

• go(n) : 前进或后退到某个页面 , 参数n表示前进或后退页面数量( 比如:-1 表示后退到上一页)

默认路由

• 现在路由都是点击导航菜单后展示的 , 如何在进入页面的时候默认展示
• 默认路由: 表示进入页面时就会匹配的路由
• 默认路由path为: /

  • <Route path='/' component={ Home } />

匹配模式

模糊匹配模式

• 当Link组件的 to 属性值为"/login"时 , 为什么默认路由也被匹配成功
• 默认情况下 , React 路由是模糊匹配模式
• 模糊匹配规则 : 只要pathname 以path开头就会匹配成功

<Link to="/login">登录页面</Link>
<Route path="/" component= { Home } /> //匹配成功

精准匹配

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

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