首页
学习
活动
专区
工具
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

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

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

    58020

    柯里化与反柯里化

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

    90410

    react-router 的使用与优化

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

    3.2K10

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

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

    62930

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

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

    68810

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

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

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

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

    14.7K41

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

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

    52630

    无废话快速上手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),是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。...核心思想是把多参数传入的函数拆成单参数(或部分)函数,内部再返回调用下一个单参数(或部分)函数,依次处理剩余的参数。

    72620

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

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

    1.1K30

    从零手写react-router

    所以我这里也就直接引入这两个库了,虽然下面我都会讲到基本使用, 但是同学有时间的话还是可以阅读以下官方文档还有一个需要注意的点是: 下面我书写的router原理都是使用hooks + 函数组件来书写的..., 而官方是使用类组件书写的, 所以如果你对hooks还不是很明白的话, 得去补一下这方面的知识, 为什么要选择hooks, 因为现在绝大多数大厂在react上基本都在大力推荐使用hook, 所以我们得跟上时代不是...一些配置: 如是否精确匹配, 是否大小写敏感等 * * 这个函数要做的事情非常简单, 当我调用这个函数并且传递了相应 * 参数以后, 这个函数需要返回给我一个对象, 对象成员如下 * { * params..., 我们从react-router官方的逻辑也可以想到大概是这么回事: 因为你使用了官方Switch以后匹配不上的组件都不会在React组件树里存在我们在react-router目录下新建一个Switch.js...// Redirect组件其实就是用来做重定向的, 其实逻辑也可以非常简单, 当你遇到了Redirect组件, 你通过location上// 的replace方法将他去渲染指定的路径就行了import

    1.4K40

    从零手写react-router

    所以我这里也就直接引入这两个库了,虽然下面我都会讲到基本使用, 但是同学有时间的话还是可以阅读以下官方文档还有一个需要注意的点是: 下面我书写的router原理都是使用hooks + 函数组件来书写的..., 而官方是使用类组件书写的, 所以如果你对hooks还不是很明白的话, 得去补一下这方面的知识, 为什么要选择hooks, 因为现在绝大多数大厂在react上基本都在大力推荐使用hook, 所以我们得跟上时代不是...一些配置: 如是否精确匹配, 是否大小写敏感等 * * 这个函数要做的事情非常简单, 当我调用这个函数并且传递了相应 * 参数以后, 这个函数需要返回给我一个对象, 对象成员如下 * { * params..., 我们从react-router官方的逻辑也可以想到大概是这么回事: 因为你使用了官方Switch以后匹配不上的组件都不会在React组件树里存在我们在react-router目录下新建一个Switch.js...// Redirect组件其实就是用来做重定向的, 其实逻辑也可以非常简单, 当你遇到了Redirect组件, 你通过location上// 的replace方法将他去渲染指定的路径就行了import

    1.5K50
    领券