React路由及 React 路由中核心组件

最新推荐文章于 2024-07-27 11:38:12 发布

ProbeGene

最新推荐文章于 2024-07-27 11:38:12 发布

阅读量1.9k

点赞数 4

分类专栏： React 文章标签： React路由 React路由核心组件 React

本文链接：https://blog.csdn.net/yangyang_A/article/details/107768621

版权

本文详细介绍了React路由的重要性和工作原理，重点解析了React Router的使用，包括前端路由的概念、React Router的核心组件如BrowserRouter、HashRouter、Route、Link、NavLink、Switch和Redirect等，以及它们的特性与应用场景。同时，文中还提到了动态路由的处理方法和如何通过withRouter组件注入路由对象。

摘要由CSDN通过智能技术生成

React 路由

react-router路由路官网

安装: npm install react-router-dom

传统模式下 我们把整个应用分成了多个页面, 然后通过 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 的路由

React Router

React项目中使用的 React Router 库

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

Web

native

基于 Web 的 React Router

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

安装:
npm i -S react-router-dom
react-router-dom 的核心组件如下

Router 组件

BrowserRouter 组件

HashRouter 组件

Route 组件

Link 组件

NavLink 组件

Switch 组件

Redirect 组件