react路由的简单使用

最新推荐文章于 2022-06-19 17:02:24 发布
最新推荐文章于 2022-06-19 17:02:24 发布
阅读量137 收藏
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50518977/article/details/111874669
版权

react路由：

HashRouter 路由 有一个#，这种模式常用

BrowserRouter：路由中没有#，会发送ajax请求，返回一个页面，需要后端支持，这种模式一般不怎么使用

react-router-dom；是页面开发的路由，react-router-native：是react-native（RN）开发

普通hash模式下：匹配路由以什么开头，或者与当前要跳转的路由一定匹配

如果出现二级路由的时候，需要使用exact来精确匹配

Route：一个路由的配置对象/组件，Redirect：重定向

switch组件:

相当于页面的switch方法，在写默认路由的时候，需要把默认路由写在最后，不然会递归（或者开启exact匹配）

如果整个路由都匹配完成后，还是没有匹配到具体的路由，应该跳转到默认页面，或404

使用switch匹配到一个路由就停止查找路由

在这里插入图片描述

react路由传参

一：在页面上传参数的时候，props.history.push方法接收一个对象，路由名字叫：pathname，需要传递的数据叫：state（接收一个对象），在页面上的props.location来 接收

二：使用动态路由，定义路由的时候 /：

三：使用固定参数传递，在定义路由的时候，使用render属性，这个属性绑定一个方法，这个方法有一个props入参，返回一个组件，解构props，然后再进行传参

路由权限管理

在这里插入图片描述

两种方法：一是：render方法，一是直接在组件里面使用三目运算

通用路由的使用方法

1：默认路由一般放在路由定义的最后，如果有404页面，需要放在默认路由的后边

pray Serendipity
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
RN导航路由配置(包含禁用左右滑动返回到上一个页面,以及无组件导航的案例)
weixin_68658847的博客
03-23 504
RN导航路由配置(包含禁用左右滑动返回到上一个页面)
MVC搭建webAPI服务
freebirds_zh的专栏
06-28 9462
    近期，有小伙伴再微信公众号中不断刷新SpringBoot的搭建过程，完美展示了java框架MVC思想的成熟与稳定。相比SpringMVC搭建过程而已，搭建过程更简洁明了。详情可以参见https://blog.csdn.net/qq_28135179/article/details/80685924。完全是入门SpringBoot的绝世好帖。       本人是学习C#的，重心依然放在C#这...
MVC实现的webApi接口
03-14
1.使用.net Framework 4.5实现的webApi接口。 2. http get 请求，json格式返回 。 3.请求格式为：http://192.168.10.100/ParkApi/Index 4.返回格式为：{"code":1,"msg":"success"}
C# MVC调用webapi
zhu58252601的博客
12-24 679
前台按钮 <button class="btn btn-primary" style="margin-left:20px" onclick="Get1();" );">测试GET接口1</button> <button class="btn btn-primary" style="margin-left:20px" onclick="Get2();" );"...
vue-router--命名路由
qq_43470725的博客
06-19 254
vue-router
简单谈谈React中的路由系统
12-10
本篇文章要介绍的是React中经常使用到的路由，react-router主要使用HTML5的history API来同步你的UI和URL。 react-router的最新版本是v4.1.1，由于4.0版本和之间的版本API变化较大，所以本篇文章的内容并不能应用到...
React 路由懒加载的几种实现方案
01-19
这篇文字简单的介绍了React在路由懒加载方面的几种实现方案。 传统的两种方式 import() 符合ECMAScript提议的import()语法，该提案与普通 import 语句或 require 函数的类似，但返回一个 Promise 对象。这意味着...
React Router基础使用
11-30
React Router是React的路由库，保持相关页面部件与URL间的同步 下面就来简单介绍其基础使用，更全面的可参考 指南 1. 它看起来像是这样 在页面文件中   在外部脚本文件中     2. 库的引入 React Router库的引入，...
react-router 路由切换动画的实现示例
12-10
路由切换动画 因为项目的需求，需要在路由切换的时候，加入一些比较 zb 的视觉效果，所以研究了一下。...先简单介绍一下动画插件的使用方式。 CSSTransition这个组件有两个比较主要的属性：key和in。 in:Boolean
React中因相对路径而导致样式文件丢失的问题
kiku
10-26 588
一级路由样式丢失问题 当我们在React写一级路由的时候如果地址path不是/about而是/flyShark/about这种的 不是如下???? <NavLink to="/about" activeClassName="active">About</NavLink> <Route path="/about" component={About}></Route> 而是如下???? <NavLink to="/flyShark/about" activ
基于C# MVC开发的WEB API通用框架 附带 微信 支付宝支付集成(十分经典)
02-28
基于C# MVC开发的WEB API通用框架 附带 微信 支付宝支付集成(十分经典)
RN和React路由详解及对比
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
06-01 1932
前言 在平时H5或者RN开发时，我们业务场景中大部分都不是单页面的需求，那这时我们就能使用路由在进行多页面的切换。下面会对比一下react路由和RN路由的本质区别和使用方法。 路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程 React路由 简介 使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-d
react 中刷新，路由传参数丢失不存在了？
weixin_30300523的博客
07-25 2622
你可能在Link to没写state {{pathname:'/report',state:{storageClear:this.state.storageClear}}} 转载于:https://www.cnblogs.com/panax/p/9367605.html
React BrowserRouter路由配置，不需要#号
JiaEnYa的博客
06-19 4120
React BrowserRouter路由配置，不需要#号 介绍一下我的项目使用的路由，O(∩_∩)O~ 路由文件：router.js import React from 'react' import { BrowserRouter as Router, Route } from 'react-router-dom'; import login from './login/login'; e...
解决react路由跳转传参刷新页面后参数丢失问题
weixin_43954835的博客
04-14 8121
import { useHistory } from 'react-router-dom'; const history = useHistory(); history.push({ pathname: '/details', state: { name: name, id: id, }, }); 在history中使用state确实可以传参数，在进入页面时可以正常显示，但是在刷新页面后state里面的数据会清空，页面就无法正常显示。.
第五，vue-router命名路由和命名视图（以及学完vue-router总结）
li__po
05-28 2961
前面把动态路由、嵌套路由等弄完了，这里搞完命名路由和命名视图，vue-router的基本使用方法就算是完篇了。vue-router命名路由①命名路由就是在routers配置路由名称的时候给路由定义不同的名字，这样的好处就是可以在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.push一样的效果：&lt;router-link :to="{ name: 'user...
华为 等价路由
热门推荐
艺博东的博客
05-14 1万+
切忌自我感动，觉得自己有多努力多可怜，事实上，比你努力的人多的是，比你矫情的没几个。 文章目录 一、路由基础 二、拓扑 三、等价路由 四、路由优化 五、路由收敛 六、总结 （一）路由表与FIB表 （二）路由协议优先级 （三）路由加表与选路 （四）静态路由 等价路由（ECMP）即为到达同一个目的 IP 或者目的网段存在多条 Cost 值相等的不同路由路径。
react 路由使用
最新发布
06-01
React Router 是一个为 React 应用程序提供路由功能的第三方包。它可以帮助我们在 React 应用程序中 URL，使得用户能够通过 URL 直接访问到特的页面。 使用 React Router，你需要首先安装它。可以通过以下命令来安装： ``` npm install react-router-dom ``` 然后在应用程序中引入路由相关的组件和方法： ```javascript import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; ``` 其中，`BrowserRouter` 是一个用于包裹整个应用程序的组件。`Switch` 组件用于包裹多个 `Route` 组件，用于匹配 URL 和组件。`Route` 组件用于定义每个 URL 对应的组件，`Link` 组件用于定义每个链接。 下面是一个简单的例子： ```javascript import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function Users() { return <h2>Users</h2>; } function App() { return ( <Router> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/users">Users</Link> </li> </ul> </nav> <Switch> <Route path="/about"> <About /> </Route> <Route path="/users"> <Users /> </Route> <Route path="/"> <Home /> </Route> </Switch> </div> </Router> ); } ReactDOM.render(<App />, document.getElementById("root")); ``` 在这个例子中，我们定义了三个组件：`Home`、`About` 和 `Users`。在 `App` 组件中，我们使用 `Router` 包裹整个应用程序，并在组件中引入了三个链接，分别对应 `Home`、`About` 和 `Users` 组件。使用 `Switch` 和 `Route` 组件，我们将每个 URL 映射到相应的组件。 在这个例子中，如果用户访问 `/about`，则会显示 `About` 组件；如果用户访问 `/users`，则会显示 `Users` 组件；如果用户访问 `/`，则会显示 `Home` 组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值