react 路由介绍

react 路由

1. react 路由介绍

前端应用发展

• 浏览器每向服务器发起一次请求，服务器生成一个html页面，返回给浏览器

• 现在SPA（单页应用程序），也就是只有一个 HTML 页面（首页）的应用程序。其余页面（组件）都是在第一次请求完成之后由 JavaScript 动态生成的。

• 一个 SPA 应用程序由多个组件（功能）组成，而多个组件不会同时出现在页面中。这就会产生一个问题：“某个组件什么时候该出现什么时候该消失？”

  react 路由的出现就解决了这个问题

react 路由

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

2. 路由的基本使用

2.1 使用步骤

1. 安装

   npm i react-router-dom
   

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

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

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

   <Router>
       <div>
           <Link />
           <Route />
       </div>
   </Router>
   

4. 使用— Link 组件作为组件切换按钮(起点)

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

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

   const First = () => <p>页面一的页面内容</p>
   <Router>
       <div>
           <Link to="/first">页面一</Link>
           <Route path="/first" component={First}></Route>
       </div>
   </Router>
   

2.2 常用组件说明

• Router 组件：包裹整个应用，一个 React 应用只需要使用一次

• 两种常用 Router： HashRouter 和 BrowserRouter

• HashRouter：使用 URL 的哈希值实现（localhost:3000/#/first）

• BrowserRouter：使用 H5 的 history API 实现（localhost:3000/first）—推荐

• Link 组件：用于指定导航链接（a标签）

  // to属性：浏览器地址栏中的pathname（location.pathname）
  <Link to="/first">页面一</Link>
  

• Route 组件：指定路由展示组件相关信息

  // path属性：路由规则
  // component属性：展示的组件
  // Route组件写在哪，渲染出来的组件就展示在哪
  <Route path="/first" component={First}></Route>
  

3. 路由的执行过程

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

4. 编程式导航

• 编程式导航：通过 JS 代码来实现页面跳转

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

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

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

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

5. 默认路由

• 问题：现在的路由都是点击导航菜单后展示的，如何在进入页面的时候就展示呢？

• 默认路由：表示进入页面时就会匹配的路由

• 默认路由path为：/

  <Route path="/" component={Welcome} />
  

6. 匹配模式

6.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）
  

  path	to属性（能够匹配的pathname）
  /	所有 pathname
  /first	/first 或 /first/a 或 /first/a/b/…

6.2 精确匹配

• 问题：默认路由任何情况下都会展示，如何避免这种问题？

• 给 Route 组件添加 exact 属性，让其变为精确匹配模式

• 精确匹配：只有当 path 和 pathname 完全匹配时才会展示该路由

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

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

---

总结

1. React 路由可以有效的管理多个视图（组件）实现 SPA
2. Link组件是起点，Route组件是终点
3. 通过 props.history 实现编程式导航
4. 默认模糊匹配，添加 exact 变精确匹配
5. React 路由的一切都是组件，可以像思考组件一样思考路由