React路由-react-router-dom安装与使用(一)

最新推荐文章于 2024-04-24 14:54:57 发布

此鱼非闲鱼也

最新推荐文章于 2024-04-24 14:54:57 发布

阅读量4.5k

点赞数

分类专栏： React 文章标签： React路由 HashRouter BrowserRouter Route组件 Link组件

本文链接：https://blog.csdn.net/m0_45315697/article/details/107334420

版权

1、路由
当应用变得复杂的时候，就需要分块的进行处理和展示。
传统方式的处理: 把整个应用分成了多个页面，然后通过 URL 进行连接。

传统方式的弊端:

每次切换页面都需要重新发送所有请求和渲染整个页面，性能上会有影响；
会导致整个 JavaScript 重新执行，丢失状态。

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

**单页面应用优缺点**如下：

优点	缺点
有更好的用户体验（减少请求、渲染以及页面跳转等待），页面切换快	首次进入页面处理比较慢(请求减少，在同一页面内容就增多了，加载时间随之增加)
数据和页面内容由异步请求（AJAX）+ DOM 操作来完成，前端处理更多的业务逻辑	不利于搜索引擎优化(SEO)

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

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

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

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

基于 URL Hash 的路由
基于 HTML5 History API 的路由
开发环境下(上线前)，在地址栏url中后者比前者多了一个#，其他没有什么差别；
参考https://www.cnblogs.com/GGbondLearn/p/12239651.html

React Router
基于 web 的 React Router 为：react-router-dom
安装
npm i -S react-router-dom

BrowserRouter 组件
基于 HTML5 History API 的路由组件

HashRouter 组件
基于 URL Hash 的路由组件
示例：简单的tab选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hash值的使用-简单tab选项卡</title>
</head>
<body>
    <a href="#first">one</a>
    <a href="#second">two</a>
    <a href="#third">three</a>
    <div id="box"></div>
    <script>
        function getHash(params) {
   
            console.log(window.location.hash);
            box.innerHTML = window.location.hash;
        } 
        // 监听hashchange事件，当hash值发生改变时，调用getHash方法
        window.addEventListener("hashchange",getHash);
    </script>
</body>
</html>

Route 组件
通过该组件来设置应用单个路由信息，Route 组件所在的区域就是就是当 URL 与当前 Route 设置的 path 属性匹配的时候，后面 component 将要显示的区域
示例：
src/view/index.js
src/view/about.js
src/App.js

import React from 'react';
//index.js
export default function Index(){
    
    return (<h1>首页</h1>);
}

import React from 'react';
//about.js
export default

最低0.47元/天解锁文章

此鱼非闲鱼也

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
React路由-react-router-dom安装与使用(一)

路由当应用变得复杂的时候，就需要分块的进行处理和展示。传统方式的处理:把整个应用分成了多个页面，然后通过 URL 进行连接。传统方式的弊端:每次切换页面都需要重新发送所有请求和渲染整个页面，性能上会有影响；会导致整个 JavaScript 重新执行，丢失状态。单页面应用单页面应用SPA(Single Page Application): 整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容。**单页面应用优缺点**如下：
复制链接

扫一扫