react笔记（十七）—— react路由介绍

小徐今天学习了吗
200 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章react笔记（十六）—— redux中间件中，我们学习了Redux中间件介绍、中间件的触发时机、logger 中间件、redux-thunk-基本使用、使用 redux-thunk 中间件前后对比、redux-devtools-extension的使用等相关知识点。在本篇文章中，我们将学习到单页应用程序的概念、优势、React 路由介绍、模拟路由的实现等相关知识点。

单页应用程序

  • SPA： Single Page Application 单页面应用程序，整个应用中只有一个页面（index.html）
  • MPA : Multiple Page Application多页面应用程序，整个应用中有很多个页面（*.html）

单页应用程序的优势：

  1. 加快页面响应速度，降低了对服务器的压力

    • 传统的多页面应用程序，每次请求服务器返回的都是一整个完整的页面
    • 单页面应用程序只有第一次会加载完整的页面，以后每次请求仅仅获取必要的数据

  2. 更好的用户体验，运行更加流畅

单页应用程序的缺点：

不利于 SEO 搜索引擎优化。因为 爬虫 只爬取 HTML 页面中的文本内容，不会执行 JS 代码。可以通过 SSR（服务端渲染 Server Side Rendering）来解决 SEO 问题：先在服务器端把内容渲染出来，然后，返回给浏览器的就是纯 HTML 内容了。页面静态化，比如，对于一个电商应用可以为每一个商品生产一个静态的HTML页面，静态 HTML 页面中是带有文字内容的，所以，有利于 SEO 的。

React 路由介绍

现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）。前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系。使用 React 路由简单来说就是：配置路径和组件（配对）。

模拟路由的实现

hashchange ： 当地址栏的hash值发生了改变，这个事件就会触发。

import React, { useEffect, useState } from 'react'
import Home from './pages/Home'
import Search from './pages/Search'
import Comment from './pages/Comment'
export default function App() {
  const [current, setCurrent] = useState('')

  useEffect(() => {
    const onChange = () => {
      // console.log(window.location.hash)
      setCurrent(window.location.hash.slice(1))
    }
    window.addEventListener('hashchange', onChange)
    return () => {
      window.removeEventListener('hashchange', onChange)
    }
  })
  return (
    <div>
      <ul>
        <li>
          <a href="#/home">首页</a>
        </li>
        <li>
          <a href="#/comment">评论</a>
        </li>
        <li>
          <a href="#/search">搜索</a>
        </li>
      </ul>
      <hr />
      {current === '/home' && <Home></Home>}
      {current === '/search' && <Search></Search>}
      {current === '/comment' && <Comment></Comment>}
    </div>
  )
}
avatar
文章
阅读
粉丝