react-router-dom入门使用实例分析

这篇文章主要讲解了“react-router-dom入门使用实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“react-router-dom入门使用实例分析”吧！单页WEB应用（single page web application , SPA）。整个应用只有一个完整的页面。点击页面的链接不会刷新页面，只会做页面的局部更新数据都需要通过ajax请求获取，并在前端异步展现。1. 什么是路由？一个路由就是一个映射关系（key:value）key为路径，value可能是function 或 component2. 路由分类后端路由：理解：value是 function ，用来处理客户端提交的请求。注册路由：router.get(path, function(request,response))工作过程：当node 接收到一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据。前端路由：浏览器端路由，value 是 component，用于展示页面内容；注册路由：

hash模式的路由：（地址栏中带有 # 号）

浏览器的历史记录（history）是一个栈的结构。

重要是事情说三遍。

每当执行push操作时，都是将path推入栈顶，浏览器也自动显示栈顶的内容。

functionpush(path){//path：/test1
history.push(path)
returnfalse
}

此时栈中有着至少两条数据，栈底是：localhost:5500,栈顶是刚刚push进来的 localhost:5500/test1
浏览器会显示栈顶路径对应的路由界面。
执行浏览器的回退操作其实就是将栈顶的 “/test1”出栈。

而执行replace操作时，是将目前栈顶的元素替换。

functionreplace(path){//path:/test2
history.replace(path)
}

若原栈顶是 /test1，执行replace后则将栈顶的 /test1替换为 /test2，且显示的是 /test2 的路由界面。

监听路由发生变化

history.listen(location=>{
console.log('请求路由路径变化了',location)
})

路由实现页面回退（将栈顶元素出栈）

history.goBack()

路由实现页面前进（将栈外元素推入栈顶）

history.goForward()

react-router-dom@5

react的一个插件库
专门用来实现一个SPA应用
基于 React 的项目基本都会用到此库。

下载react-router-dom

npminstallreact-router-dom@5
yarnaddreact-router-dom@5

⚠️注意，本文讲解的是react-router-dom@5.3.3版本

基本路由使用
要实现图中案例，首先要先实现：（编写路由链接）
点击按钮实现路径跳转（也就是点击About，路径变为：localhost:3000/about）
然后实现：（注册路由）
路径变化后自动匹配响应的路由组件。（也就是路径为：/about时，自动匹配About组件）
importReact,{Component}from'react'
import{NavLink,Route}from'react-router-dom'
importHomefrom'./pages/Home'//Home是路由组件
importAboutfrom'./pages/About'//About是路由组件
importHeaderfrom'./components/Header'//Header是一般组件
exportdefaultclassAppextendsComponent{
render(){
return(









{/*原生html中靠跳转不同的页面*/}
{/*About
Home*/}

{/*在React中靠路由链接实现切换组件—-编写路由链接*/}
About
Home





{/*注册路由*/}







)
}
}
这么写的话脚手架会报一个错误：

原因是，要在标签以及标签外面用标签包裹起来。
我们可以在index.js中完成这个需求：
//index.js
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import{BrowserRouterasRouter}from'react-router-dom'
importAppfrom'./App';

constroot=ReactDOM.createRoot(document.getElementById('root'));
root.render(





);
将整个App组件用Router标签包裹起来，这样就不会有报错啦。

一般组件与路由组件
路由组件与一般组件的不同：

路由组件放在 pages 文件夹中，一般组件放在 components 文件夹中；

路由组件使用：
importHomefrom'./pages/Home'//Home是路由组件
一般组件使用：
importHeaderfrom'./components/Header'//Header是一般组件
一般组件只要没传递props，那么组件的内部的this.props就一定为空。

哪怕没给路由组件传递props属性，路由组件内部的this.props并不为空。

原因是：路由组件会收到路由器自动传递给路由组件的props。

路由API：Switch提高路由匹配效率（单一匹配）

不加switch：
{/*注册路由*/}
注册路由时，不使用switch，两个组件同时匹配/home路径。

此时两个组件内容都会展示。

原因是：

注册路由时，与路径相匹配的路由组件都会展示，都会一一匹配。

使用switch：
{/*注册路由*/}
注册路由时，在外围包裹一组 Switch 标签，可以让路由实现单一匹配，也就是说，/home路径匹配到Home组件之后就不会再向下继续匹配了。这样的好处是，提高了路由匹配效率，如果不添加 Switch 标签，react路由会同一个路径查找多次，但是添加了 Switch 标签后，react路由只要查找到第一个与路径匹配的组件（如本例中的Home组件）就会结束查找，提高效率。

感谢各位的阅读，以上就是“react-router-dom入门使用实例分析”的内容了，经过本文的学习后，相信大家对react-router-dom入门使用实例分析这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！

hash模式的路由：（地址栏中带有 # 号）浏览器的历史记录（history）是一个栈的结构。浏览器的历史记录（history）是一个栈的结构。浏览器的历史记录（history）是一个栈的结构。重要是事情说三遍。每当执行push操作时，都是将path推入栈顶，浏览器也自动显示栈顶的内容。此时栈中有着至少两条数据，栈底是：localhost:5500,栈顶是刚刚push进来的 localhost:5500/test1
浏览器会显示栈顶路径对应的路由界面。
执行浏览器的回退操作其实就是将栈顶的 “/test1”出栈。而执行replace操作时，是将目前栈顶的元素替换。若原栈顶是 /test1，执行replace后则将栈顶的 /test1替换为 /test2，且显示的是 /test2 的路由界面。监听路由发生变化路由实现页面回退（将栈顶元素出栈）路由实现页面前进（将栈外元素推入栈顶）react的一个插件库专门用来实现一个SPA应用基于 React 的项目基本都会用到此库。下载react-router-dom⚠️注意，本文讲解的是react-router-dom@5.3.3版本要实现图中案例，首先要先实现：（编写路由链接）
点击按钮实现路径跳转（也就是点击About，路径变为：localhost:3000/about）
然后实现：（注册路由）
路径变化后自动匹配响应的路由组件。（也就是路径为：/about时，自动匹配About组件）这么写的话脚手架会报一个错误：原因是，要在标签以及标签外面用标签包裹起来。
我们可以在index.js中完成这个需求：将整个App组件用Router标签包裹起来，这样就不会有报错啦。路由组件与一般组件的不同：路由组件放在 pages 文件夹中，一般组件放在 components 文件夹中；路由组件使用：一般组件使用：一般组件只要没传递props，那么组件的内部的this.props就一定为空。哪怕没给路由组件传递props属性，路由组件内部的this.props并不为空。原因是：路由组件会收到路由器自动传递给路由组件的props。不加switch：注册路由时，不使用switch，两个组件同时匹配/home路径。此时两个组件内容都会展示。原因是：注册路由时，与路径相匹配的路由组件都会展示，都会一一匹配。使用switch：注册路由时，在外围包裹一组 Swit免费云主机域名ch 标签，可以让路由实现单一匹配，也就是说，/home路径匹配到Home组件之后就不会再向下继续匹配了。这样的好处是，提高了路由匹配效率，如果不添加 Switch 标签，react路由会同一个路径查找多次，但是添加了 Switch 标签后，react路由只要查找到第一个与路径匹配的组件（如本例中的Home组件）就会结束查找，提高效率。感谢各位的阅读，以上就是“react-router-dom入门使用实例分析”的内容了，经过本文的学习后，相信大家对react-router-dom入门使用实例分析这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关

免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。

react-router-dom入门使用实例分析

react-router-dom@5

基本路由使用

一般组件与路由组件

路由API：Switch提高路由匹配效率（单一匹配）

相关

相关推荐