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

React-router-dom重定向不适用于withRouter HOC (react-redux)

React-router-dom是React官方提供的用于构建单页面应用的路由库,它提供了一系列的组件和API来管理应用的路由。

重定向是指在用户访问某个URL时,将其自动导航到另一个URL。在React-router-dom中,可以使用Redirect组件来实现重定向功能。通过设置Redirect组件的to属性,可以指定要重定向到的URL。

withRouter是一个高阶组件(Higher-Order Component,HOC),它可以将路由相关的属性(如history、location、match)注入到被包裹的组件中。通过使用withRouter,我们可以在不是路由组件的地方获取到路由相关的信息。

然而,React-router-dom的重定向功能在使用withRouter HOC时可能会出现问题。这是因为withRouter会将路由相关的属性注入到被包裹组件的props中,而Redirect组件需要直接作为路由组件的子组件使用,而不是通过props传递。因此,直接在使用withRouter的组件中使用Redirect组件是不起作用的。

解决这个问题的方法是,将Redirect组件放在路由组件中,并根据需要使用withRouter将路由相关的属性注入到该组件中。例如:

代码语言:jsx
复制
import { Redirect, withRouter } from 'react-router-dom';

class MyComponent extends React.Component {
  render() {
    // 根据需要进行重定向
    if (condition) {
      return <Redirect to="/new-url" />;
    }

    // 组件的其他内容
    return (
      // ...
    );
  }
}

export default withRouter(MyComponent);

在上述代码中,我们将Redirect组件放在了MyComponent组件中,并根据条件进行重定向。同时,使用withRouter将路由相关的属性注入到MyComponent中,以便在需要时进行路由操作。

总结一下,React-router-dom的重定向功能不适用于使用withRouter HOC的组件。为了解决这个问题,我们可以将Redirect组件放在路由组件中,并使用withRouter将路由相关的属性注入到该组件中。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

从零开始react实战:云书签-1 react环境搭建

然后安装react-router依赖: cnpm install --save react-router-dom 从路由开始就能体会到 react 一切都是 js 的精髓,react-router-dom...,当前面的都不匹配就会匹配这个(因为没有开启exact且 path 为/),然后重定向到/404 后续用到嵌套路由时会更加深入的讲解路由相关。.../index.module.less"; import { connect } from "react-redux"; import { changeLoginInfo, DATA_NAME } from...mapDispatchToProps:本方法用于修改 store 数据,返回的函数对象也会绑定到 Login 组件的 props 中,其中的 dispath 参数,用于调用 reducer 中的处理函数...connect 方法用于将上面两个函数和 Login 组件绑定起来,这样就能在 props 中获取到了。如果还有 withRouter,应将 withRouter 放在最外层。

3.5K30

从项目中由浅入深的学习react (2)

shouldComponentUpdate, 生命周期 销毁:componentWillUnmout react-dom 提供render方法 react-router 4.x组成 react-router(核心路由和函数) , react-router-dom...router(只能有一个) , route(匹配路由渲染UI) , history, link(跳转) , navlink(特定的link,会带样式) , switch(匹配第一个路由) , redirect(重定向...) , withRouter(组件,可传入history,location,match 三个对象) react-router 3.x组成 就是react-router react-router 3.x的...API router , route , history(push和replace方法) , indexRedirect(默认加载) , indexRedirect(默认重定向) , link(跳转)...createMemoryHistory redux 单向数据流 , action(通过dispatch改变state值) , reducer(根据 action 更新 state) , store(联系action和reducer) react-redux

1.4K40

「react进阶」一文吃透React高阶组件(HOC)

高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。 ?...( keepaliveLifeCycle(Index) )) 模型:嵌套HOC 对于不需要传递参数的HOC,我们编写模型我们只需要嵌套一层就可以,比如withRouter, function withRouter...所以正向属性代理,更适合做一些开源项目的hoc,目前开源的HOC基本都是通过这个模式实现的。 ② 同样适用于class声明组件,和function声明的组件。...这种用法在react-redux中connect高阶组件中用到过,用于处理来自redux中state更改,带来的订阅更新作用。 我们将上述代码进行改造。...比如如果你再用另一个同样会修改 componentDidMount 的 HOC 增强它,那么前面的 HOC 就会失效!同时,这个 HOC 也无法应用于没有生命周期的函数组件。

1.8K30

无废话快速上手React路由

, Route, Redirect, Switch, Link, NavLink, withRouter, } from 'react-router-dom' 简单路由跳转 实现一个简单的一级路由跳转...要点总结: 将多个Route组件同时放在一个Switch组件中,即可避免多次无意义的路由匹配,以此提升性能 重定向 当页面跳转时,若跳转链接没有匹配上任何一个 Route 组件,那么就会显示 404 页面...go go 方法顾名思义,是用于跳转到指定路径的。 该方法接受一个参数(参数类型为 Number),情况如下: 当参数为正数 n 时,表示跳转到下 n 个页面。...此时,react-router-dom 提供了一个 withRouter 方法,可以使普通组件也能像路由组件一样有那些方法或数据可以使用 使用方法如下: import { BrowserRouter...as Router, Route, NavLink, Switch, withRouter, // 1.

1.7K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券