React Hooks 路由 withRouter不能使用解决方法

最新推荐文章于 2022-10-13 11:01:06 发布
最新推荐文章于 2022-10-13 11:01:06 发布
阅读量401 收藏
点赞数
分类专栏： React 文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41623635/article/details/125412045
版权

withRouter引入报错 如下图

Antd Menu组件导航selectedKeys属性绑定获取地址

引入 useLocation

import { useLocation } from "react-router-dom";

使用方法

let location = useLocation();
const selectedKey = location.pathname;

想散在风中
关注
专栏目录
React路由 - 路由参数、withRouter组件、Router hooks、路由组件传参、Switch组件、Redirect重定向组件、动态路由
此鱼非闲鱼也的博客
07-15 4723
说动态路由之前，先看看路由参数都有哪些？ 1、路由参数 1-1、history 历史记录及路由给我们的一些操作 路由是根据历史记录跳转视图 history对象中提供了很多方法，便于用户再浏览历史记录中跳转。 go() 方法可以回到历史记录中的某一页面， 通过与当前页面相对位置来标志 。 当前页面的相对位置标志为0。go()方法中，传入一个参数，这个参数是一个整数， 即在 history 记录中向前或者后退多少步。 history.goBack()方法可以回到历史记录中的上一个 URL。 调用该方法的效果等价
react高阶组件和hooks
wlt_5079的博客
06-22 826
1.react高阶组件 2.hooks语法 3.路由6.0自封装withRouter函数
React中的hook 以及 router
yanwu9537的博客
06-20 3164
hook 作用： 可以让我们在函数式组件中添加state,也可以让我们使用部分生命周期钩子函数 useState useEffect import React,{ useState,useEffect } from 'react' const Item = ( props ) => { return <li> { props.content } &lt...
React---使用withRouter高阶组件解决react组件获取不到组件路由信息的问题
前端与计算机相关知识的分享，博主的qq523235674
04-15 1132
注意: 默认情况下，只有路由<Router>直接渲染的组件才能够获取到路由信息(比如：history.go()等) 如果需要在其他组件中获取到路由信息可以通过withRouter高阶组件来获取 1.从react - router - dom中导入withRouter高阶组件 import { withRouter } from "react-router-dom" 2.使用withRouter高阶组件包装NavHeader组件 目的：包装后，就可以在组件中获取到当前路由信息了 ..
react中使用高阶组件withRouter报错解决方法
qq_44410862的博客
06-09 711
原代码如下 报错信息提示 解决办法
react的hook钩子
qq_40816649的博客
09-02 700
react组件有两种写法一种是export default直接暴露一个function，还有一种是直接定义一个class类然后继承react库的Component类这两种方式来创建react组件。 对于class类创建react组件的方式来说可以直接定义组件的this.state，这样在render中return的jsx模板中就可以直接this.state调用，以及this.setState来更...
React 路由组件 详解
YuLong的博客
10-24 2510
文章目录路由组件1、HashRouter和BrowserRouter2、Route3、Router4、Link和NavLink5、Redirect6、Switch7、withRouter嵌套路由向路由组件传递参数路由跳转的两种模式编程式路由导航Router Hooks 路由组件 路由组件与一般组件区别： 1、写法不同： 一般组件：<Demo/> 路由组件：<Route path="/demo" component={Demo}/> 2、存放位置不同： 一般组件：compone
React：react-router动态路由的使用及项目封装路由全过程
热门推荐
JCat的博客
08-26 1万+
一、路由 1.安装 npm install --save react-router npm install --save react-router-dom //使用react-router5以上版本 2. 语法参考文档 react-router-cn：github文档 react-router官方学习文档 router语法学习 3. 路由的作用 单页面刷新（SPA），切换显示视图 初步使用方式：src/app.jsx页面 import React, { Component } from 'react'
监听react-router路由的变化
mmzzll2019的博客
05-10 9094
我们有时候会遇到这种业务场景： 进入某个页面时，我们需要验证用户是否已经登陆，是否拥有足够权限？我们可以通过监听路由的变化来实现。但是在react下，怎么实现呢？ 下面讨论实现过程： 手动实现 react-router-watcher实现 手动实现 使用Hook方式实现： import { useEffect, useState, useRef, useCallback, useMemo } from 'react' import { useLocation, useHistory, useRouteM
React18手动封装WithRouter
sxc__的博客
10-13 565
在react18以前,如果是一个路由组件的话,在其props属性有当前路由地址,路由跳转等方法,而到了18以后以为推崇函数式组件,直接把路由组件props删除了,而函数式组件还可以通过hooks获取并使用,那类式组件只能自己进行封装。既然类式组件无法使用它们,那我们就通过函数return进行返回类式组件,通过props属性手动去传递给他们,child是传递的类式组件，可能是别的组件的子组件,通过三点运算符,将其接受的props解构赋值。
为了全面 hooks，我写了 use-routes ……
weixin_34185320的博客
03-22 348
不要打我！ 唉，我也是迫不得已，准备重构我们的 react 应用，但是总得有个理由 所以准备全面移除 class ，切换 hooks，这不是真的必须滴，只是，尿性使然嘿嘿 其实 hooks 和 class 是完全不一样的感觉，hooks 取新的状态，是执行完这个函数，得到新状态 class 重新 new 可就啥也没了(⊙o⊙)… 所以，我就写了个路由 2333 好像没啥因果关系，但是得益于 ho...
路由的监听和withRouter
zhangyuea的博客
05-16 825
路由的监听和withRouter 每一个使用了路由的组件都会被Route包裹起来，每个被Route包裹的组件都会多出几个对象，通过this.props查看，所以当我们使用生命周期钩子函数中的 componentWillMount()函数或者 componentDidUpdate()函数都可以监听到路由的变化 路由改变，组件的 this.props.location 中的 pathname 就会改变...
react前端踩坑记录（2）：withRouter解决路由更新，组件不更新的问题
Ditto_one的博客
03-08 638
react-router 、history.push进行路由切换，现象（1）url更新，但是组件不更新。（2）手动刷新页面，组件才进行更新 https://stackoverflow.com/questions/43351752/react-router-changes-url-but-not-view
React-Router Hooks
前端精髓
05-25 1431
Route 写法1 <Route path="/child"> <Child /> </Route> // 类似 <Route path="/child" children={<Child />}></Route> children 组件使用一个特殊的 children prop 来将 Route 的子组件传递到渲染结果中。 写法2 <Route path="/child" component={Child}>&l
在函数组件Hooks中跳转路由
weixin_45264424的博客
08-30 1376
使用 withRouter： import { Route, withRouter } from "react-router-dom"; function App(props) { const handleGoTo = () => { props.history.push('/home') } return ( <div> <button onClick={handleGoTo}>跳转</button> &l
React Hook第七篇----React路由(详细篇)
没有途径，只有努力
06-18 1540
React路由详情篇 一级路由与多级路由 重定向 配置404页面拦截 嵌套路由 导航 声明式导航 注:这里导航需要放到BrowserRouter中，所以这里我通过插槽实现部署到路由BrowserRouter中… 编程式导航 路由传参 方式1(路径传参) 获取数据:函数组件会接收到props 参数在params中 方式2(state传参) 参数在query中 路由拦截 写法 RequireAuth为拦截的函数 Cinemas时需要拦截的组件 里边进行逻辑判断，正确则返回传进.
初学react - 使用@withRouter 报错的解决
sunshime的博客
03-23 1338
报错： Support for the experimental syntax 'decorators-legacy' isn't currently enabled 解决方案： 先运行 npm run eject 将默认隐藏的项目暴露出来，然后在 package.json 文件的 babel 对象里加入以下代码： "plugins": [ [ "@babel/plu...
react withRouter的用法
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
11-07 7808
withRouter的作用就是, 如果我们某个东西不是一个Router, 但是我们要依靠它去跳转一个页面, 比如点击页面的logo, 返回首页, 这时候就可以使用withRouter来做.withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.（我的理解加上之后可以写...
react hooks 路由跳转传参
最新发布
06-28
React Hooks 路由跳转传参可以使用 React Router 提供的 useHistory 钩子函数。具体步骤如下： 1. 在组件中引入 useHistory 钩子函数： ``` import { useHistory } from 'react-router-dom'; ``` 2. 在组件中调用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

想散在风中

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值