react-router 的withrouter高阶组件

最新推荐文章于 2024-03-15 10:48:49 发布
最新推荐文章于 2024-03-15 10:48:49 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： react react 奇怪的库 文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sadasddpk/article/details/123805654
版权

在react-router中，只有通过Router渲染出来的组件中才会有history、location、match 三个对象，

但是会存在需求让我们在非路由组件中进行路由跳转，withRouter的作用就是：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上

在这里插入图片描述

当然啦，withRouter（v6版本弃用了），换成了直接用useNavigate （强行hooks起来！！！！）

类组件是成版本弃子了吗……

嘻喽喽喽
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
create React-app脚手架中封装withRouter.js高阶组件
weixin_58576761的博客
07-09 477
由于 useNavigate、useLocation、useSearchParams等方法，只能写在函数内，也就是说我们可以在React Hooks 函数组件内可以直接 import 导入，创建实例化对象后我们就可以直接使用(必须在组件的最顶层使用，不能写在函数方法或jsx内)，但是对于React class类组件，显然我们是无法直接使用这些组件方法的，因此我们需要封装一个高阶组件。 高阶组件：高阶组件必须是一个函数，该函数接收一个组件作为参数，被调用时将组件传进去，返回一个新的组件.....
hacker-news:使用ReactJS构建的Hacker News的前端版本，探讨了React-Router和高阶组件的使用
05-24
使用高阶组件（HOC）作为代码重用的解决方案，以及更深入地了解react-router库。 该项目的陷阱之一是缺少任何测试功能。 测试驱动开发（TDD）方法将是非常可取的。软件设计我重新设计网站的方法是创建两个HOC，它们...
react-router:react-router 用法及封装路由权限验证高阶组件
04-30
react-router-demo 所有通过路由渲染的组件属性中会多三个属性 history， match， location 可以通过 this.props.history.push('/user/list') 跳转路径 withRouter 把当前组件包装成一个Router组件 是一个高阶组件，通常通过路由渲染的页面会有三个属性 history， match， location，可以通过history做路由跳转。但是其他组件是没有这三个属性的，如果想通过js进行路由跳转，可以用withRouter实现 +import {withRouter} from 'react-router-dom' +export default withRouter(组件名) NavLink NavLink 有个默认功能，自动为点击的添加一个class=“active”
react中的withRouter高阶组件
weixin_46392334的博客
08-03 1015
withRouter高阶组件：（实现编程式导航，js代码调转） 出现原因： 1、默认情况下必须是经过Route路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push(’/detail’)跳转到对应路由的页面 作用： 高阶组件中的withRouter, 作用是将一个没有被Route路由包裹的组件，包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的p
使用 React Router 的 withRouter
最新发布
JudithHuang的博客
03-15 951
通过使用withRouter，我们可以方便地在任何组件中访问 React Router 提供的路由相关属性，从而实现更灵活的页面导航和状态管理。
015 路由的高阶组件-withRouter
test253506088的博客
06-21 338
什么是高阶组件（HOC）： 入参是一个组件，同时返回的也是一个组件，这类组件被称为高阶组件
withRouter组件(推荐阅读)
hsany330的专栏
05-06 2553
作用： 默认情况下必须经过路由匹配渲染的组件才存在this.props,才拥有路由参数，执行this.props.history.push('/detail')跳转到对应路由的页面，然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，将react-router的history、location、match三个对...
use-react-router：使用React Router的React Hook进行发布订阅行为
02-03
与withRouter高阶组件不同， useReactRouter会在位置更改时重新呈现您的组件！ useReactRouter()返回一个对象，该对象包含HOC将作为props传递的history ， location和match属性。 可以在Medium： 上找到有关该...
React-Router包装器提供了更好的路由体验-React开发
05-27
HiRouter HiRouter是著名的React Router的React高阶组件，可提供更好的路由体验。 npm install react-hirouter --save HiRouter能够创建便捷的导航功能。 HiRouter的概念HiRouter是著名的React Router的React High ...
react-redux-boilerplate:一个非常基本的样板，带有react，react router v4和redux
05-12
要使路由受到保护，只需用RequireAuth高阶组件（ ./src/hoc/require_auth.js ）包装该组件./src/hoc/require_auth.js 。 如果用户未通过身份验证，则此HighOrderComponent会将其重定向到您可以设置的页面。
react router中的withRouter
笔记搬运工
01-15 5423
withRouter You can get access to the history object’s properties and the closest 's match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to...
React 知识汲取篇 —— React高阶组件 withRouter
风华流沙君莫笑的博客
12-02 262
高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中. // withRouter实现原理: // 将组件包裹进 Route, 然后返回 // const withRouter = () => { // return () => { // return <Route component={Nav} /> //
react-router withRouter
热门推荐
ISaiSai的专栏
09-26 2万+
react-router 提供了一个withRouter组件 withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入。 无需一级级传递react-router 的属性，当需要用的router 属性的时候，将组件包一层withRouter，就可以拿到需要的路由信息import {withRouter} from 're
react-router v4.0+ 的 withRouter
newBunny的博客
06-06 818
首先，我们先来说说withRouter是做什么的，它主要是使非路由直连组件可以直接获取到路由的props（history、location、match等等） import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; import { RouteCompon...
React-关于withRouter
ccx
02-14 1469
react-router 提供了一个withRouter组件  withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入. 无需一级级传递react-router 的属性，当需要用的router 属性的时候，将组件包一层withRouter，就可以拿到需要的路由信息. 如果是route直接的component的对象...
React-一般组件、路由组件、WithRouter
qk
10-05 572
【代码】React-一般组件、路由组件、WithRouter。
react-router中withRouter的作用
qq_35261510的博客
07-24 1855
react-router中withRouter的作用 withRouter是react-router的一个高阶组件，可获取history render时会把match, location和history传入props react中经过路由渲染的组件才拥有路由参数，使用this.props.history.push('/a')跳转到对应路由的页面 使用withRouter可以将路由参数传入t...
react-router-dom中 withRouter 作用及大致用法
weixin_42192113的博客
09-24 2079
作用1. 使用Route包裹组件， 将react-router的history, location, match信息通过props传递给包裹的组件 默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用 函数跳转 的写法，执行this.props.history.push('/***')跳转到对应路由的页面。 然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就可以使用this.
react-router-dom
08-02
React Router是一个用于构建单页应用程序的库，它提供了多个包可以单独使用。其中，react-router-dom是基于react-router的一个包，用于在浏览器运行环境下提供路由功能。在浏览器中使用React Router时，只需要安装react-router-dom，它会自动安装react-router的依赖。你可以使用以下命令安装react-router-dom： npm install react-router-dom -S 或者 yarn add react-router-dom 使用react-router-dom，你可以创建路由组件来管理应用程序的不同页面之间的导航。例如，你可以使用withRouter高阶组件来监听路由的变化，并在路由变化时执行一些操作。下面是一个使用class组件的例子： ```javascript import React from "react"; import { withRouter } from "react-router-dom"; class ScrollToTop extends React.Component { componentDidUpdate(prevProps) { if (this.props.location.pathname !== prevProps.location.pathname) { window.scrollTo(0, 0); } } render() { return null; } } export default withRouter(ScrollToTop); ``` 在这个例子中，ScrollToTop组件使用了withRouter高阶组件来获取路由信息，并在componentDidUpdate生命周期方法中监听路由的变化。当路由发生变化时，组件会将页面滚动到顶部。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值