React路由的详解

最新推荐文章于 2023-08-18 10:25:48 发布

ZZZ --- jh

最新推荐文章于 2023-08-18 10:25:48 发布

阅读量289

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/ZZZ___jh/article/details/119255802

版权

React路由

路由

当应用变得复杂时, 就需要分块进行处理和展示, 传统模式下, 我们是把整个应用分成了多个页面, 然后通过URL进行连接. 但是这种方式也有一些问题, 每次切换页面都需要重新发送所有请求和渲染整个页面, 不止性能上会有影响, 同时也会导致整个JavaScript重新执行,丢失状态.

SPA

概念

单页面应用, Single Page Application , 整个应用只加载一个页面(入口页面), 后续在与用户的交互过程中, 通过DOM操作在这个单页面上动态生成结构和内容.

优点

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

缺点

首次进入处理慢
不利于SEO(搜索引擎优化)

SPA的页面切换机制

虽然SPA的内容都是在一个页面通过JavaScript动态处理的, 但是还是需要根据需求在不同的情况下分内容展示, 如果仅仅只是依靠JavaScript内部机制去判断, 逻辑会变得过于复杂, 通过JavaScript与URL进行结合的方式: JavaScript根据URL的变化来处理不同的逻辑, 交互过程中只需要改变URL即可. 这样把不同URL与JavaScript对应的逻辑进行关联的方式就是路由, 其本质上与后端路由的思想是一致的.

前端路由

前端路由只是改变URL或URL中的某一部分, 但一定不会直接发送请求, 可以认为仅仅只是改变了浏览器地址栏上的URL而已, JavaScript通过各种手段处理这种URL的变化, 然后通过DOM操作动态的改变当前页面的结构

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

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

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

网址: https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

React Router

网址: https://reacttraining.com/react-router/

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

web
native

基于Web的React Router

基于 web 的 React Router 为：react-router-dom

安装

npm i -S react-router-dom

组件

url的hash

URL的hash就是锚点，本质上是改变window.location的href属性；
我们可以直接赋值location.hash来改变href，但是页面不发生刷新

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="#view1">视图1</a>
  <a href="#view2">视图2</a>
  <a href="#view3">视图3</a>

  <div id="view"></div>

  <script>
    function getHash(){
       
      console.log(window.location.hash);
      view.innerHTML = window.location.hash;
    }
    getHash();
    window.addEventListener('hashchange',getHash)
  </script>
</body>
</html>

以上这个案例点哪个按钮页面就会显示出来对应的锚点,控制台也会输出对应的

路由的类型: BrowserRouter 组件和HashRouter 组件,他俩得包裹着所有的内容

BrowserRouter 组件

基于 HTML5 History API 的路由组件

引入: import { BrowserRouter } from "react-router-dom";

HashRouter 组件

基于 URL Hash 的路由组件

引入: import { HashRouter } from "react-router-dom";

Route组件

通过该组件来设置应用单个路由信息, Route组件所在的区域就是当URL与当前Route设置的path属性匹配的时候, 后面component将要显示的区域.

path属性

匹配url;( 匹配url的方式不是相等, 而是以给定的url开头)

component属性

当url和前面的path匹配上的时候,compinent里面写显示的内容

exact属性

exact属性表示路由使用精确匹配模式, 非exact模式下’/’ 匹配所有以’/’ 开头的路由.

<!-- src/view/index.js -->
import React from "react";

export default function IndexPage(){
   
  return <h1>首页</h1>
}

<!-- src/view/about.js -->
import React from "react";

export default function AboutPage(){
   
  return <h1>关于我们</h1>
} 

<!-- src/view/aboutMore.js

最低0.47元/天解锁文章

ZZZ --- jh

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React路由的详解

React路由路由SPA概念优点缺点SPA的页面切换机制前端路由React Router基于Web的React Router安装组件BrowserRouter 组件HashRouter 组件Route组件path属性component属性exact属性Link组件作用:to属性传递props动态路由NavLink组件activeStyleactiveClassNameisActiveSwitch组件Redirect组件withRouter组件(高阶组件, 高阶函数,高阶路由)hooks (Router5.0
复制链接

扫一扫