React路由(基础版)

·  阅读 292
React路由(基础版)

React路由介绍

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

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

路由的基本使用

使用步骤

  1. 安装:yarn add 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>
复制代码
  1. 使用Link 组件作为导航菜单(路由入口)
    <Link to="/first">页面一</Link>
  2. 使用Route 组件配置路由规则和要展示的组件(路由出口)
const First = () => <p>页面一的页面内容</p>
<Router>
   <div className="App">
      <Link to="/first">页面一</Link>
      <Route path="/first" component={First}></Route>
   </div>
</Router>
复制代码

常用组件说明

  • Router组件:包裹整个应用,一个React应用只需要使用一次
  • 两种常用Router:HashRouter和BrowserRouter
  • HsahRouter:使用URL的哈希值实现(localhost:3000/#/first)
  • (推荐)BrowserRouter:使用H5的history API实现(localhost:3000/first)
  • Link组件:用于指定导航链接(a标签)
//to属性:浏览器地址栏中的pathname(location.pathname)
<Link to="/first">页面一</Link>
复制代码
  • Router组件:指定路由展示组件相关信息
//path属性:路由规则
//component属性:展示的组件
//Route组件写在哪,渲染出来的组件就展示在哪
<Route path="/first" component={First}></Router>
复制代码

路由的执行过程

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

编程式导航

  • 场景:点击登录按钮,登录成功后,通过代码跳转到后台首页,如何实现?
  • 编程式导航:通过JS代码来实现页面跳转
  • history是React路由提供的,用于获取浏览器历史记录的相关信息
  • push:跳转到某个页面,参数path表示要跳转的路径
class login extends Component {
   handleLogin = () => {
     // ...
     this.props.history.push('/home')
  }
  render() { ... }
}
复制代码
  • go(n):前进或后退到某个页面,参数n表示前进或后退页面数量(比如:-1表示后退到上一页)

默认路由

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

模糊匹配模式

  • 问题:当Link组件的to属性值为"/login"时,为什么默认路由也被匹配成功?
  • 默认情况下,React路由是模糊匹配模式
  • 模糊匹配规则:只要pathname以path开头就会匹配成功
<Link to="/login">登录页面</Link>
<Route path="/" component={Home} />匹配成功
//path 代表Route组件的path属性
//pathname 代表Link组件的to属性(也就是location.pathname)
复制代码
path能够匹配的pathname
/所有 pathname
/first/first或/first/a 或/first/a/b/...

精确匹配

  • 问题:默认路由任何情况下都会展示,如何避免这种问题?
  • 给Route组件添加exact属性,让其变为精确匹配模式
  • 精确匹配:只有当pathpathname完全匹配时才会展示该路由
//此时,该组件只能匹配pathname="/"这一种情况
<Route exact path="/" component=... />
复制代码

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

小总结

  1. React路由可以有效的管理多个视图(组件)实现SPA
  2. Router组件包裹整个应用,只需要使用一次
  3. Link组件是入口,Route组件是出口
  4. 通过props.history实现编程式导航
  5. 默认模糊匹配,添加exact变精确匹配
  6. React路由的一切都是组件,可以像思考组件一样思考路由
分类:
前端
分类:
前端