首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我从react-router-dom使用重定向时,我得到了TypeError: func.apply不是一个函数。我是新的反应和复习

当你在使用react-router-dom进行重定向时,如果出现TypeError: func.apply is not a function错误,通常是由于重定向函数的类型不正确引起的。

在react-router-dom中,重定向可以通过<Redirect>组件或编程式导航方式实现。无论使用哪种方式,都需要确保传递给重定向函数的类型正确。

下面是一些可能导致错误的原因和相应的解决方案:

  1. 错误的函数传递方式:
    • 确保将重定向函数作为回调函数传递,而不是直接调用。例如,正确的方式是 () => redirectFunction(),而不是 redirectFunction()
    • 如果使用编程式导航方式,确保在组件的事件处理函数中调用重定向函数,并在函数之前使用this.props.history访问路由历史对象。例如,this.props.history.push('/path')
  • 未正确绑定重定向函数的this上下文:
    • 如果使用类组件,确保在构造函数中将重定向函数绑定到正确的this上下文。例如,this.redirectFunction = this.redirectFunction.bind(this)
    • 如果使用函数组件,可以使用useCallback钩子确保每次渲染时都返回相同的重定向函数实例。

如果以上解决方案仍然不能解决问题,请检查其他与重定向相关的代码,例如路由配置是否正确,是否使用了正确的路由组件等。

另外,关于React和复习的问题,建议你参考React官方文档进行学习和复习。React官方文档提供了全面且易于理解的教程和指南,可以帮助你深入了解React的各个方面。

参考链接:

  • React官方文档:https://reactjs.org/
  • React Router官方文档:https://reactrouter.com/web/guides/quick-start
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React Router入门指南(包括Router Hooks)

在某些情况下,提供这样路由是完全可以,但请想象一下,当我们需要处理真实组件使用render可能不是正确解决方案。 那么,我们该如何显示一个真实组件呢?...同样,您还可以使用props.history.replace('/')来模仿重定向行为。 现在,让我们继续处理用户遇到不存在路由情况。...重定向到404页面 要将用户重定向到404页面,您可以创建一个组件来显示它,但是为了使事情简单起见,将仅显示带有render消息。...如果这种情况,请渲染受保护页面,否则将其重定向到主页。 到目前为止,我们已经介绍了很多内容,但是它仍然一个有趣部分:路由钩子Hooks。 让我们进入最后一节,介绍Hooks。 ?...现在,借助路由hooks,您已经亲眼目睹了它们简易性和优雅性,绝对您下一个项目中需要考虑使用

12K20

死磕 36 个 JS 手写题(搞懂后,提升真的大)

100 行代码实现 Promises/A+ 规范,找到这些文章后不是收藏夹吃灰,找个时间踏踏实实学,一行一行磨,直到搞懂为止。...call 使用一个指定 this 值和一个或多个参数来调用一个函数。...,在 bind() 被调用时,这个函数 this 被指定为 bind() 一个参数,而其余参数将作为函数参数,供调用时使用。...,有如下几个点需要考虑到: then 需要支持链式调用,所以返回一个 Promise; 处理异步问题,所以先用 onResolvedCallbacks 和 onRejectedCallbacks...状态 Promsie,且它一个 rejected Promise 值; 只要有一个 Promise pending,则返回一个 pending 状态 Promise; Promise.all

95960
  • js 实现 bind 这五层,你在第几层?

    最近在帮女朋友复习 JS 相关基础知识,遇到不会问题,她就会来问我。 ? 这不是很简单?三下五除二,分分钟解决。...这个时候,马老师就坐不住了,不服气,就去复习了一下 bind,发现太久不写基础代码,还是会需要一点复习,这一次一个有深度 bind,深得马老师真传,给他分成了五层速记法。 ?...但是想要在面试中惊艳所有人,仍然不够,接下来我们继续我们探索与研究。 第三层 - 支持柯里化 函数柯里化一个老生常谈的话题,在这里再复习一下。...,当我们执行 fn1 时候,函数使用了外层函数 x, 从而形成了闭包。...第五层 - 保留函数原型 以上方法在大部分场景下都没有什么问题了,但是,当我构造函数有 prototype 属性时候,就出问题啦。

    57320

    柯里化与柯里化

    柯里化与柯里化 最近在看一本书《JavaScript函数式编程》 里边提到了一个名词,柯里化(currying),阅读后发现在日常开发中经常会用到柯里化函数。...柯里化正好与之相反,我们要扩大一个函数适用范围,比如将Array独有的push应用到一个Object上去。...parseInt('10', 2) // 2 第二个参数可以用来标识给定值基数,告诉我们用N进制来处理这个字符串 所以当我们直接将一个parseInt传入map中就会遇到一些问题: ['1', '2...但是觉得也只是部分理念上相反,而不是向Math.max和Math.min,又或者[].pop和[].push这样完全相反。 就像柯里化缩小了适用范围,所以柯里化所做就是扩大适用范围。...小记 在《JavaScript函数式编程》中提到了,高阶函数几个特性: 以一个函数作为参数 以一个函数作为返回值 柯里化/柯里化只是其中一小部分。

    90210

    react-router 使用与优化

    对象中有一个 pushState 方法,它接受三个参数: data: 表示传入数据,可以传入任意类型数据,在跳转到页面后可以接收到该数据(必选参数); title: 表示跳转标题,一个 string...除了 pushState 函数之外,还有一个与之类似的:replaceState,它修改当前历史记录项而不是新建一个。与重定向很像,它参数与 pushState 参数一样。...本文介绍 react-router-dom 包。 使用时,你要么使用 hashRouter,要么使用 browserRouter。...在 Route 组件中除了使用 component 指定一个组件外,还可以使用 render 函数,这个函数返回一个 React 组件,表示路由要渲染内容: <Route exact path="/"...服务器端发送一个恰当重定向链接即可。location 就是将服务端接收到 URL 传递给路由来处理。 与 Redux 结合 react-router 可以与 redux 深度结合。

    3.2K10

    React 入门学习(十一)-- React 路由传参

    这是因为,我们在引入样式文件,采取相对路径,当我使用二级路由时候,会使得请求路径发生改变,浏览器会向 localhost:3000/ljc 下请求 css 样式资源,这并不是我们想要,因为我们样式存放于公共文件下...重定向路由 在我们写好了这些之后,我们会发现,我们需要点击任意一个按钮,才会去匹配一个组件,这并不是我们想要,我们想要页面一加载上来,默认就能匹配到一个组件。... 当我们加上这条语句,页面找不到指定路径,就会重定向到 /home 页面下因此当我们请求3000端口,就会重定向到 /home 这样就能够实现我们想要效果了...嵌套路由 嵌套路由也就是我们前面有提及二级路由,但是嵌套路由包括了二级、三级…还有很多级路由,当我们需要在一个路由组件中添加两个组件,一个头部,一个内容区 我们将我们嵌套内容写在相应组件里面,...,才能完成匹配 首先我们 React 中路由得注册有顺序,我们在匹配得时候,因为 Home 组件先注册,因此在匹配时候先去找 home 路由,由于是模糊匹配,会成功匹配 在 Home 组件里面去匹配相应路由

    62530

    React 入门学习(十一)-- React 路由传参

    这是因为,我们在引入样式文件,采取相对路径,当我使用二级路由时候,会使得请求路径发生改变,浏览器会向 localhost:3000/ljc 下请求 css 样式资源,这并不是我们想要,因为我们样式存放于公共文件下...重定向路由 在我们写好了这些之后,我们会发现,我们需要点击任意一个按钮,才会去匹配一个组件,这并不是我们想要,我们想要页面一加载上来,默认就能匹配到一个组件。... 当我们加上这条语句,页面找不到指定路径,就会重定向到 /home 页面下因此当我们请求3000端口,就会重定向到 /home 这样就能够实现我们想要效果了...嵌套路由 嵌套路由也就是我们前面有提及二级路由,但是嵌套路由包括了二级、三级…还有很多级路由,当我们需要在一个路由组件中添加两个组件,一个头部,一个内容区 我们将我们嵌套内容写在相应组件里面,...,才能完成匹配 首先我们 React 中路由得注册有顺序,我们在匹配得时候,因为 Home 组件先注册,因此在匹配时候先去找 home 路由,由于是模糊匹配,会成功匹配 在 Home 组件里面去匹配相应路由

    68210

    「源码解析 」这一次彻底弄懂react-router路由原理

    个人理解,单页面应用是使用一个html下,一次性加载js, css等资源,所有页面都在一个容器页面下,页面切换实质组件切换。 ?...react-router可以理解为react-router-dom核心,里面封装了Router,Route,Switch等核心组件,实现了路由改变到组件更新核心功能,在我们项目中只要一次性引入...事件触发,该对象会传入回调函数。...3 path:网址,必须与当前页面处在同一个域。浏览器地址栏将显示这个地址。...reacthistory路由状态保存在React.Content上下文之间, 状态更新。 一个项目应该有一个根Router , 来产生切换路由组件之前更新作用。

    4K40

    柯里化与柯里化

    柯里化与柯里化 最近在看一本书《JavaScript函数式编程》 里边提到了一个名词,柯里化(currying),阅读后发现在日常开发中经常会用到柯里化函数。...柯里化正好与之相反,我们要扩大一个函数适用范围,比如将Array独有的push应用到一个Object上去。...parseInt('10', 2) // 2 第二个参数可以用来标识给定值基数,告诉我们用N进制来处理这个字符串 所以当我们直接将一个parseInt传入map中就会遇到一些问题: ['1', '2...但是觉得也只是部分理念上相反,而不是向Math.max和Math.min,又或者[].pop和[].push这样完全相反。 就像柯里化缩小了适用范围,所以柯里化所做就是扩大适用范围。...小记 在《JavaScript函数式编程》中提到了,高阶函数几个特性: 以一个函数作为参数 以一个函数作为返回值 柯里化/柯里化只是其中一小部分。

    1K110

    React报错之useNavigate() may be used only in context of Router

    一旦你整个应用都被Router组件所包裹,你可以随时随地在组件中使用react router所提供钩子。 Jest 如果你在使用Jest测试库遇到错误,解决办法也是一样。...replace 如果你想使用相当于history.replace()方法,请向navigate函数传递一个配置参数。...true,浏览器历史堆栈中的当前条目会被条目所替换。...换句话说,由这种方式导航到路由,不会在浏览器历史堆栈中推入条目。因此如果用户点击了回退按钮,并不会导航到上一个页面。 这是很有用。...或者说,有一个路由要重定向到另一个页面,你不想让用户点击回退按钮从而再次重定向。 你也可以使用数值调用navigate 函数,实现从历史堆栈中回退效果。

    3.3K20

    使用React Router v6 进行身份验证完全指南

    React Router v6React应用程序一个流行且功能强大路由库。它提供了一种声明式、基于组件路由方法,并能处理URL参数、重定向和加载数据等常见任务。... 组件可以看作一个 if 语句,只有当元素与指定路径匹配,它才会作用于URL位置。...当用户登出,我们使用 React Router useNavigate 钩子将他们重定向到主页。...如果喜欢这篇文章,关注一下鼓励继续创作吧~❤️ 使用嵌套路由和 React Router v6中最强大特性之一嵌套路由。这个特性允许我们有一个包含其他子路由路由。...除了更容易使用之外,它还有很多特性,比如和一个改进组件,这大大简化了 React 应用中路由。

    14.6K41

    那些高级前端如何回答面试题_2023-02-24

    f[amount];};实现函数原型方法call使用一个指定 this 值和一个或多个参数来调用一个函数。...,在 bind() 被调用时,这个函数 this 被指定为 bind() 一个参数,而其余参数将作为函数参数,供调用时使用。...,有如下几个点需要考虑到:then 需要支持链式调用,所以返回一个 Promise;处理异步问题,所以先用 onResolvedCallbacks 和 onRejectedCallbacks 分别把成功和失败回调存起来...-- 301 Moved Permanently:永久重定向,表示请求资源已经永久到了其他位置。...302 Found:临时重定向,表示请求资源临时搬到了其他位置 303 See Other:临时重定向,应使用GET定向获取请求资源。

    52130

    无废话快速上手React路由

    要点总结: 将多个Route组件同时放在一个Switch组件中,即可避免多次无意义路由匹配,以此提升性能 重定向 当页面跳转,若跳转链接没有匹配上任何一个 Route 组件,那么就会显示 404 页面...可以看到,第三种方式参数通过 props.location.state 来获取 函数式路由 以上主要都是通过 react-router-dom Link 组件来往某个路由组件跳转 但有时,我们需要更灵活方式进行跳转路由...,例如通过调用一个函数,随时随地进行路由跳转,这就叫函数式路由 函数式路由用到方法有以下 5 个(下方截图来自路由组件 props) ?...此时,react-router-dom 提供了一个 withRouter 方法,可以使普通组件也能像路由组件一样有那些方法或数据可以使用 使用方法如下: import { BrowserRouter...图中看出,因为跳转 /home/abc ,第一个 Route 组件模糊匹配,所以先匹配到了 /home,因此 Home 组件渲染了 ; 而跳转 /about/abc ,第二个 Route 组件精准匹配

    1.8K20

    零手写react-router

    所以我这里也就直接引入这两个库了,虽然下面都会讲到基本使用, 但是同学有时间的话还是可以阅读以下官方文档还有一个需要注意: 下面书写router原理都是使用hooks + 函数组件来书写..., 而官方使用类组件书写, 所以如果你对hooks还不是很明白的话, 去补一下这方面的知识, 为什么要选择hooks, 因为现在绝大多数大厂在react上基本都在大力推荐使用hook, 所以我们跟上时代不是..., 我们react-router官方逻辑也可以想到大概这么回事: 因为你使用了官方Switch以后匹配不上组件都不会在React组件树里存在我们在react-router目录下新建一个Switch.js...router原理都是使用hooks + 函数组件来书写, 而官方使用类组件书写, 所以如果你对hooks还不是很明白的话, 去补一下这方面的知识, 为什么要选择hooks, 因为现在绝大多数大厂在...react上基本都在大力推荐使用hook, 所以我们跟上时代不是, 而且着重和大家聊也是原理, 而不是跟官方一模一样源码, 如果要1比1复刻源码不带自己理解的话, 那你去看官方源码就行了,

    3.1K30

    2022秋招前端面试题(四)(附答案)

    然后当浏览器在解析到 script 标签,会暂停构建 DOM,完成后才会暂停地方重新开始。...什么闭包,闭包作用是什么当一个内部函数被调用,就会形成闭包,闭包就是能够读取其他函数内部变量函数。...可以看到XSS危害如此之大, 那么在开发网站就要做好防御措施,具体措施如下:可以浏览器执行来进行预防,一种使用纯前端方式,不用服务器端拼接后返回(不使用服务端渲染)。...(Partial Evaluation),把接受多个参数函数变换成接受一个单一参数(最初函数一个参数)函数,并且返回接受余下参数而且返回结果函数技术。...核心思想把多参数传入函数拆成单参数(或部分)函数,内部再返回调用下一个单参数(或部分)函数,依次处理剩余参数。

    72420

    利用eBPF实现socket level重定向

    大家好,二哥。最近二哥利用业余时间在复习 eBPF ,为啥说是复习呢?因为曾经短暂使用过 eBPF 。...eBPF 在 K8s 中一个使用案例便是:利用 eBPF 实现 socket level 重定向,本篇大致介绍为何需要做 socket level 重定向以及怎么做,最后我们再来看下 Cilium 如何利用它来将两个...此外,网络包经过协议栈,起码要经过 30 个左右函数调用才能进入设备驱动层,这里一个函数都为网络延迟助了一把力。...图 1虽然示意图,但每一个细节都是在内核里有据可循,二哥想和大家说它们可不是臆想出来。嗯,你也看出来了,二哥一个以严谨著称 RD。本文中我会多次说到一个词:网络包。...这是二哥别人 repo fork 过来,已经经过测试了,可以使用

    1.3K41

    字节前端面试题总结

    (旧生命周期名称和别名都可以在此版本中使用。)...在工作中,更好方式使用 React组件生命周期之——“存在期”生命周期方法,而不是依赖这个回调函数。...(arrow functions)优点是什么作用域安全:在箭头函数之前,每一个新创建函数都有定义自身 this 值(在构造函数对象;在严格模式下,函数调用中 this 未定义;如果函数被称为...这是就用到了exact属性,它作用就是精确匹配路径,经常与 联合使用。...整个 state 转化在 reducers 中完成,并且不应该有任何副作用。何为高阶组件(higher order component)高阶组件一个以组件为参数并返回一个组件函数

    1.5K10

    2022秋招前端面试题(一)(附答案)

    调用之后回返回一个遍历器对象,包含有一个 next 方法,使用 next 方法后有两个返回值 value 和 done 分别表示函数当前执行位置值和是否遍历完毕。...Symbol.for() 可以在全局访问 symbol如何判断一个对象是不是空对象?...可以看到XSS危害如此之大, 那么在开发网站就要做好防御措施,具体措施如下:可以浏览器执行来进行预防,一种使用纯前端方式,不用服务器端拼接后返回(不使用服务端渲染)。...使用 CSP ,CSP 本质建立一个白名单,告诉浏览器哪些外部资源可以加载和执行,从而防止恶意代码注入攻击。...意义,只要转发cookie就能达到目的Cookie在请求一个页面的时候都会被发送过去如果需要域名之间跨域共享Cookie,有两种方法:使用Nginx反向代理在一个站点登陆之后,往其他网站写Cookie

    1.1K30
    领券