学习记录——react路由 react-router-dom基本使用

最新推荐文章于 2024-07-08 17:06:23 发布
最新推荐文章于 2024-07-08 17:06:23 发布
阅读量108 收藏
点赞数
分类专栏： react 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sakura_zr/article/details/111185569
版权

下载 npm install react-router-dom

在这里插入图片描述

BrowserRouter as Router：as关键字，用来给导入的变量设置新的名字
BrowserRouter：最外层的组件，可以理解为一个容器，用来放Route、Link，里面只能有一个节点
Switch：包裹Route，匹配与当前访问地址匹配的Route
Route：用来匹配浏览器的路径
Link:相当于a链接

在这里插入图片描述
Redirect重定向，
在输入的路径没有与之匹配的组件的时候，自动匹配Redirect标签里设置的组件
在这里插入图片描述
NavLink，和Link差不多，会自动加一个active类名，可以给他设置样式
在这里插入图片描述
给active随便写个样式
在这里插入图片描述
使用NavLink标签
在这里插入图片描述

　　　SakuraZr
关注
专栏目录
React的路由——react-router-dom
m0_48982503的博客
11-15 867
安装 cnpm i react-router-dom -S； npm i react-router-dom -S 引入 hash路由：HashRouter import { HashRouter } from 'react-router-dom' history路由：BrowserRouter import { HistoryRouter } from 'react-router-dom' 注意 路由的所有配置项必须在HashRouter...
react-router-dom 记录
无缺的博客
04-07 254
参考：https://www.jianshu.com/p/fb201f82cf8c 安装 react-router-dom npm install react-router-dom 一.基本使用 App.js import React from 'react' import { BrowserRouter as Router, Route, Link, Switch } from '...
BrowserRouter和HashRouter的区别
weixin_30414245的博客
01-19 6436
BrowserRouter： 　　原理是H5的history API，IE9及以下不兼容，需要由web server支持，在web client这边window.location.pathname被react router解析，example.com/react/route HashRouter： 　　原理是URL的hash，不需要由web server支持，因为它的只有‘/’path需要由...
react-tips1: import {BrowserRouter as Router , Route, Switch, Link } from 'react-router-dom';
cvper's world !
02-18 2982
React 引入模块使用了 es6 的 import 的方式， 在 示例中有如下代码： import {BrowserRouter as Router , Route, Switch, Link } from 'react-router-dom'; 上面使用了 import 语法，但是我们看到中间有个 as 的使用， 这个 as 的意思是给当前的名字起一个小名，别名； 我们原本是要引入...
react-router HashRouter和BrowserRouter的使用
落草为寇的海带王
07-27 2万+
官网推荐的是BrowserRouter，但是此方式需要服务器配合，而且有点不好的是重定向只能到首页，无法停留在当前页，具体用法很简单，举例说明。 示例网站（使用HashRouter） HashRouter//react-router要求只只有一个字节点 //router内部的Link和Route会一一匹配，匹配到则加载对应的组件 //to 和 Route 的path是一样的（除了/结尾） //
react路由基础（Router、Link和Route）
热门推荐
mapbar_front的博客
05-30 3万+
Facebook对react进行持续的改进，路由作为其中最重要的一部分，在4.0版本对其进行了大量的优化，总的来说，简单易用！ 之前使用react路由的时候，我们引入的是react-router包。 现在改版之后，我们引入的包是react-router-dom包。改版之后的react-router-dom路由，我们要理解三个概念，Router、Route和Link。1、Router Route
React(四)——React 路由（react-router-dom）
黎小小的博客
03-30 2166
目录 1.路由 1.1SPA 1.2SPA 的页面切换机制 1.3后端路由与前端路由 1.3.1后端路由 1.3.2前端路由 1.4React.js 中的路由 2.React Router 2.1基于 Web 的 React Router 2.1.1安装 2.1.2概览 3.基础 3.1应用场景（一） 3.1.1Router 组件 3.1.2Route 组件 3.1...
React 路由总结 react-router-dom6+react-router-dom5
前端开发工程师
10-17 961
现在的前端应用大多都是SPA单页面应用程序，也就是一个HTML页面的应用程序。体验更好，对服务器的压力更小，更受欢迎，为了有效地使用单页面来管理原来多页面的功能，前端路由就此产生了，前端路由能让一个视图或页面导航到另一个视图或页面中。 前端路由是一套映射规整，在React中，是URL路径与组件的对应关系，使用React路由简单来说就是配置路径和组件。
react路由学习 react-router-dom初始化
qq_54559394的博客
07-08 355
比如父级goods路由下面新增一个child 你可以写 child 或者是/goods/child 不能写/child。和navlink一样 两者之间的区别是 navlink可以判断激活状态可以设置样式 link就是普通的a标签。这个东西有点类似于vue-router中的路由独享守卫 在路由中配置loader函数 路由加载之前调用。在vue中我们可以使用独享守卫来进行接口的请求 拿到对应页面的数据 loader也可以发送异步请求。当我们在做权限拦截的时候可以通过loader来进行判断。
React 路由跳转 react-router-dom
qinleo6的博客
05-21 350
react-router-dom V4版本。react-router-dom V5版本。react-router-dom V6版本。
关于react-router/react-router-dom v4 history不能访问问题的解决
11-28
在React应用中，React Router是一个强大的路由库，用于管理页面间的导航。在本文中，我们将深入探讨一个关于`react-router-dom` v4版本中的`history`对象无法访问的问题及其解决方案。 在升级到`react-router-dom` ...
react学习日记---(5) react-router-dom@6 react路由-路由重定向-路由嵌套
Tomcat20的博客
10-11 758
react-router-dom@6 路由-路由重定向-路由嵌套
React路由-react-router-dom安装与使用(一)
此鱼非闲鱼也的博客
07-14 4628
路由 当应用变得复杂的时候，就需要分块的进行处理和展示。 传统方式的处理:把整个应用分成了多个页面，然后通过 URL 进行连接。 传统方式的弊端: 每次切换页面都需要重新发送所有请求和渲染整个页面，性能上会有影响； 会导致整个 JavaScript 重新执行，丢失状态。 单页面应用 单页面应用SPA(Single Page Application): 整个应用只加载一个页面（入口页面）， 后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容。 **单页面应用优缺点**如下：
Concis组件库封装——Loading加载中
量子前端的博客
06-22 2150
一个常规的react loading组件的开发和测试
numexpr-2.8.3-cp38-cp38-win_amd64.whl
10-14
numexpr-2.8.3-cp38-cp38-win_amd64.whl
ujson-5.3.0-cp311-cp311-win_amd64.whl
10-14
ujson-5.3.0-cp311-cp311-win_amd64.whl
基于MATLAB车牌识别程序技术实现面板GUI.zip
最新发布
10-14
vos3000
RJFireWall-maste赛资源
10-14
RJFireWall-maste赛资源
msgpack-1.0.4-cp39-cp39-win_amd64.whl
10-14
msgpack-1.0.4-cp39-cp39-win_amd64.whl
React-Router-DOM：实现嵌套路由详解
"在本文中，我们将深入探讨如何在React应用中使用`react-router-dom`实现嵌套路由。首先，我们从入口文件`index.js`开始，这是一个典型的React应用启动点，导入了必要的React库、ReactDOM、主组件`App`以及Babel-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值