React路由

React路由介绍

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

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

路由的基本使用

使用步骤

• 安装： yarn add react-router-dom

  • 如果没有安装yarn工具的，需要先全局安装一下yarn：npm install -g yarn

• 导入路由的三个核心组件： Router / Route / Link

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

• 使用Router 组件包裹整个应用

• 使用Link组件作为导航菜单（路由入口）

• 使用Route组件配置路由规则和要展示的组件（路由出口）

常用组件说明

• Router组件：包裹整个应用，一个React应用只需要使用一次
  • 两种常用的Router： HashRouter和BrowserRouter
  • HashRouter： 使用URL的哈希值实现 （localhost:3000/#/first）
  • 推荐 BrowserRouter：使用H5的history API实现（localhost3000/first）
• Link组件：用于指定导航链接（a标签）
  • 最终Link会编译成a标签，而to属性会被编译成 a标签的href属性
• Route组件：指定路由展示组件相关信息
  • path属性：路由规则，这里需要跟Link组件里面to属性的值一致
  • component属性：展示的组件
  • Route写在哪，渲染出来的组件就在哪