react的withRouter高阶组件:

withRouter的作用就是, 如果我们某个东西不是一个Router, 但是我们要依靠它去跳转一个页面, 比如点击页面的logo, 返回首页, 这时候就可以使用withRouter来做.

在 React Router 中,withRouter 是一个函数,用于与路由相关的组件。它接受一个组件作为参数,并返回一个新的增强过的组件。

这个增强过的组件可以访问到 React Router 提供的路由对象的属性和方法。

通常,当一个组件位于路由体系之外,例如在嵌套组件中或作为子组件传递时,

它可能无法直接访问路由对象(如history、location和match)。这时,可以使用 withRouter 将这个组件包装起来,使它能够通过 props 获取到路由对象。

复制代码
import React from 'react';
import { withRouter } from 'react-router-dom';

const MyComponent = ({ history, location, match }) => {
    // 可以通过 props 获取路由对象的属性和方法
    console.log(history, location, match);

    return <div>这是一个使用 withRouter 的组件</div>;
};
相关推荐
AI袋鼠帝5 小时前
火爆全网的Seedance2.0 十万人排队,我2分钟就用上了
前端
IT_陈寒5 小时前
React Hooks闭包陷阱:你以为的state可能早就过期了
前端·人工智能·后端
Jenlybein5 小时前
快速了解熟悉 Vite ,即刻上手使用
前端·javascript·vite
小码哥_常5 小时前
安卓开发避坑指南:全局异常捕获与优雅处理实战
前端
lihaozecq5 小时前
我用 1 天的时间 vibe coding 了一个多人德州扑克游戏
前端·react.js·ai编程
momo061175 小时前
AI Skill是什么?
前端·ai编程
言萧凡_CookieBoty5 小时前
用 AI 搞定用户系统:Superpowers 工程化开发教程
前端·ai编程
小小小小宇5 小时前
Go 语言协程
前端
牛奶5 小时前
5MB vs 4KB vs 无限大:浏览器存储谁更强?
前端·浏览器·indexeddb
牛奶5 小时前
setTimeout设为0就马上执行?JS异步背后的秘密
前端·性能优化·promise