React_SPA与路由机制

SPA

Single Page Application : 单页面应用，整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态更新结构和内容

优点：

  • 有更好的用户体验（减少请求和渲染和页面跳转产生的等待与空白），页面切换快
  • 重前端，数据和页面内容由异步请求（AJAX）+ DOM 操作来完成，前端处理更多的业务逻辑

缺点：

  • 首次进入处理慢

  • 不利于 SEO

  • SPA 的页面切换机制
    通过把 JavaScript 与 URL 进行结合的方式：JavaScript 根据 URL 的变化，来处理不同的逻辑，交互过程中只需要改变 URL 即可。
    /*
    http//:www.baidu.com:80/search#hans?name=lll&age=8
    */

前端路由

是一种把 不同URL 与 JavaScript对应逻辑 进行关联的方式

  • URL 的变化不会直接发送 HTTP 请求
  • 业务逻辑由前端 JavaScript 来完成

目前前端路由主要的模式：

  • 基于 URL Hash 路由
  • 基于 HTML5 History API 路由

React Router

React Router 提供了多种不同环境下的路由库

  • web
    基于 web 的 React Router 为：react-router-dom
npm i -S react-router-dom
  • native

路由组件

  • BrowserRouter 组件 -- history模式
  import {BrowserRouter} from "react-router-dom"
  <BrowserRouter></app></BrowserRouter>
  • HashRouter 组件 -- hash模式

Route 组件

设置应用单个路由信息，<Route path=['/',""] exact component={} />

exact精确匹配模式，非exact模式 匹配所有以 'url' 开头的路由(默认)

Route : render

<Route exact path='/' render={() => <Home items={this.state.items} />} />

Switch 组件

该组件只会渲染首个被匹配的组件

项目内页面跳转 react-router-dom 拦截了实际 a 标签的默认动作，同时把对应的组件显示在指定的位置 #### NavLink 组件 NavLink 与 Link 类似，但是它可以添加选中效果 - activeStyle 当当前 URL 与 NavLink 中的 to 匹配的时候，激活 activeStyle 中的样式 - activeClassName 激活的是 className - isActive 默认情况下， isActive 可以自定义激活逻辑，isActive 是一个函数，返回布尔值

非路由组件传参

  • withRouter 组件
    高阶组件-接收一个组件并返回一个新组件
    withRouter(组件)
  • hooks
    • useHistory()
    • useLocation()
    • useParams()
    • useRouteMatch()
posted @ 2021-11-10 23:27  忘川酒  阅读(57)  评论(0)  编辑  收藏  举报