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

无法从React Router 4嵌套路由中的Redux Connect()获取属性

React Router 4是一个用于构建单页应用的React路由库,它提供了一种将组件与URL进行映射的方式。Redux Connect()是一个用于连接React组件与Redux状态管理库的函数。

在React Router 4的嵌套路由中,如果想要从Redux Connect()获取属性,需要确保Connect()函数包装的组件位于路由组件的内部。这样可以确保Connect()函数能够访问到Redux store中的状态,并将其作为属性传递给包装的组件。

以下是一种可能的解决方案:

  1. 确保你的Redux Connect()函数包装的组件位于路由组件的内部。例如,你可以在路由组件的render()方法中渲染Connect()函数包装的组件。
代码语言:txt
复制
import { connect } from 'react-redux';
import { Route } from 'react-router-dom';

const MyComponent = connect(mapStateToProps)(YourComponent);

class MyRouteComponent extends React.Component {
  render() {
    return (
      <div>
        {/* 其他路由组件内容 */}
        <Route path="/nested" render={() => <MyComponent />} />
      </div>
    );
  }
}
  1. 确保你在Connect()函数的mapStateToProps函数中正确地映射Redux store中的状态到组件的属性上。这样,你就可以在组件中通过props访问到这些属性。
代码语言:txt
复制
const mapStateToProps = (state) => {
  return {
    myProperty: state.myProperty
  };
};
  1. 确保你在组件中正确地访问Connect()函数传递的属性。你可以通过props来访问这些属性。
代码语言:txt
复制
class YourComponent extends React.Component {
  render() {
    const { myProperty } = this.props;
    // 使用myProperty进行其他操作
    return (
      <div>
        {/* 组件内容 */}
      </div>
    );
  }
}

这样,你就可以从React Router 4嵌套路由中的Redux Connect()函数获取属性了。

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

相关·内容

关于各方面 杂七杂八一些内容

,只有登录用户才能访问 文档:https://www.jianshu.com/p/6c6879567466 4.react router path 中通配符: <Route path="/hello/...<em>的</em>作用和使用: (1)是将一个组件包裹进Route里面,  然后<em>react</em>-<em>router</em><em>的</em>三个对象history, location, match就会被放进这个组件<em>的</em>props<em>属性</em>中....路由组件可以直接<em>获取</em>这些<em>属性</em>,而非路由组件就必须通过withRouter修饰后才能<em>获取</em>这些<em>属性</em>了,比如 App组件就可以直接<em>获取</em>路<em>由中</em>这些<em>属性</em>了...,但是,如果App组件中如果有一个子组件Foo, 那么Foo就不能直接<em>获取</em>路<em>由中</em><em>的</em><em>属性</em>了,必须通过withRouter修饰后才能<em>获取</em>到。...到<em>redux</em><em>的</em>组件, 来实现双向绑定<em>router</em><em>的</em>数据到<em>redux</em> store中, 这么做<em>的</em>好处就是让应用更<em>Redux</em>化,可以通过向仓库派发动作<em>的</em>方式实现路由跳转。

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

    目录解释: assets: 存放图标,小图片等资源文件 components:存放公共组件 layout: 存放样式组件,用于嵌套路由和子路由中复用代码 pages: 存放页面组件 redux:存放 redux...然后安装react-router依赖: cnpm install --save react-router-dom 路由开始就能体会到 react 一切都是 js 精髓,react-router-dom.../index.module.less"; import { connect } from "react-redux"; import { changeLoginInfo, DATA_NAME } from...: mapStateToProps:本方法整个 store 中获取需要数据,传递到 Login 组件 props 中。...connect 方法用于将上面两个函数和 Login 组件绑定起来,这样就能在 props 中获取到了。如果还有 withRouter,应将 withRouter 放在最外层。

    3.5K30

    react全家桶包括哪些_react 自定义组件

    官网 3.1 基本使用 React Router版本4开始,路由不再集中在一个包中进行管理了: react-routerrouter核心部分代码 react-router-dom是用于浏览器...react-router-native是用于原生应用 安装react-router: 安装react-router-dom会自动帮助我们安装react-router依赖 npm install react-router-dom...mapDispatchToProps(obiect): 将分发 action 函数转换为 UI 组件标签属性 Counter: UI 组件 // 1.引入连接函数 import { connect...npm install -D babel-plugin-styled-components 5.5 路由嵌套及传参 路由嵌套(子路由): 文件夹嵌套,最后就可以形成子路由 路由传参:...Next.js中无法通过 /user/:id方式传递参数 只能通过 /user?

    5.8K20

    HOC vs Render Props vs Hooks

    常见例子:React Redux connect,将 Redux Store 和 React 组件联系起来。...// react-redux connect 例子 const ConnectedMyComponent = connect(mapState)(MyComponent); // 实现一个简单 HOC...但在许多情况下,无法对含有状态逻辑组件进一步拆分。因此在没有 React Hooks 前,存在使用 HOC / Render Props 进行重构方案。 方案优劣 为辅助理解,可参考以下图片。...代码相对冗长,但能清晰看到组件接收 props 以及传递功能等,可以对 props 属性重命名,不会有命名冲突。但难以在 render 函数外使用数据源,且容易形成嵌套地狱。...使用 Hooks 时,能清晰看到组件接收 props 以及传递功能等,可以对 props 属性重命名,不会有命名冲突,不存在嵌套地狱,且没有数据源获取及使用范围限制。

    1.2K41

    React】归纳篇(十)组件间通信方式之Redux | UI组件AntDesign | Redux-react

    react-router4 react-router概览 1、react一个插件库 2、专门用于实现一个SPA应用 3、基于react项目都会用到该库 SPA 1、点击页面中链接不会刷新页面,本身也不会向服务器发送请求...(即:页面地址跳转都是在浏览器端实现,不会去重新请求服务端获取 html,html 只是在应用初始化时候加载一次。)...请求,但界面会发生局部更新 后台路由 注册路由:router.get(path,function(req,res){}) 当node接收到一个请求时,依据请求路径找到匹配路由,调用路由中函数来处理请求...路由嵌套-路由组件路由 思考:如何编写路由效果?...(listener)发布,重新渲染组件; action: 标识要执行行为对象 包含2个方面的属性 type: 表示属性,值为字符串,唯一,必要属性 xxx:数据属性,值类型任意,可选属性 eg:

    24130

    一天梳理完react面试高频题

    处理异步操作,actionCreator返回值是promise如何配置 React-Router 实现路由切换(1)使用 组件路由匹配是通过比较 path 属性和当前地址...React-Router如何获取URL参数和历史对象?(1)获取URL参数get传值路由配置还是普通配置,如:'admin',传参方式如:'admin?id='1111''。...(2)获取历史对象如果React >= 16.8 时可以使用 React Router中提供Hooksimport { useHistory } from "react-router-dom";let...给组件设置一个初始化state,第一次render时候会用state来渲染组件通过this.setState方法来更新stateReact-Router 4怎样在路由变化时重新渲染同一个组件?...属性 to: string:重定向 URL 字符串属性 to: object:重定向 location 对象属性 push: bool:若为真,重定向操作将会把新地址加入到访问历史记录里面,并且无法回退到前面的页面

    4.1K20

    React-Redux-实现原理

    这种连接是通过高阶组件嵌套来实现,它使 React 组件能够读取并分发 Redux 状态。...在看了前面的 React-Redux 之后,这篇文章主要介绍就是内部实现过程,为了更好去了解 React-Redux 内部工作原理,首先新建一个 connect 目录,存放具体实现代码,在经过观察我们之前使用...,不然其它地方无法进行使用。...props 当中了,但是尽管如此我们代码和官方还是有些不一样,还是有区别的,我们现在获取 Redux 当中数据是经过手动导入进行获取,官方是通过 Provider 传入进来,所以下面我还会继续将完善一下我们封装代码...将之前 store 当中获取代码改造为我们全局上下文对象当中进行获取import React from 'react';import StoreContext from ".

    25120

    Vue,React,微信小程序,快应用,TS 和 Koa 一把梭

    ]可以配置子路由 路由钩子 router.beforeEach(实现导航钩子守卫)和router.afterEach vuex 4属性,state,getters, actions(异步获取数据)和mutations...react + react-router-v4 + redux +ant-design-mobile+iconfont react-router-v4:路由4.x版本 redux:状态管理 ant-design-mobile...+umi+ant-design-pro dva:可拔插react应用框架,基于reactredux mui:集成reactrouterredux ant-design-pro:基于react和ant-pc...等方法 状态管理 dva里面的redux封装,属性有state,effects,reducers 组件传值 父子:props,平级redux或umirouter model 项目的model和dom...是通过@connect()连接并将部分属性添加到props里 登陆 登陆是通过在入口js里面做路由判断 4.微信小程序篇 4.1小程序demo 4.1.1效果 image.png Vue,React

    3.1K20

    react-redux 开发实践与学习分享

    关联rudex和页面组件-connect 之前主页面的代码可以看到,错误信息显示是由组件props传进来,而主页面是如何获取相关props呢,答案是通过一个connect函数。...connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]) connectreact组件做状态管理核心,它将组件和...mapStateToProps(state, ownProps) 第一个参数是获取redux仓库中一个函数。...为了方便快速理解,我们可以简单粗暴认为他是js中getter,setter中getter,这是一个用来redux获取函数,这个函数返回值,可以在当前组件props中拿到。...action具体定义了项目中触发行为类别,通过type属性来区别于不同行为。

    90030

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

    序列文章 项目中由浅入深学习vue,微信小程序和快应用(1) 前言 pc(dva+umi)和mobile(原生react)两个项目来介绍react使用 搞懂这两个项目,上手撸react代码so-easy...+iconfont react-router-v4:路由4.x版本 redux:状态管理 ant-design-mobile:UI组件 iconfont:字体icon 1.3 适配方案 rem适配 1.4...:是connect第二个参数, UI 组件参数到store.dispatch方法映射 react-loadable 代码分割,相当于vue-router路由懒加载 classNames 动态css...应用框架,基于reactredux mui:集成reactrouterredux ant-design-pro:基于react和ant-pc中后台解决方案 2.4适配方案 左侧固定宽度,右侧自适应...effects,reducers 组件传值 父子:props,平级redux或umirouter model 项目的model和dom是通过@connect()连接并将部分属性添加到props里 登陆

    1.4K40

    react+redux+webpack教程4

    先来安装react-router库(我目前安装版本是2.0.1,跟1.x版本区别比较大): npm install react-router --save 使用上来说,react-router不过是一些...} from 'react-redux'; import { Router, Route, browserHistory } from 'react-router' import configureStore...如果我们想在组件之外控制历史状态(比如action里),react-router里引入browserHistory或hashHsitory直接用就可以。 最后添加新闻详情页面的组件,这就很简单了吧。...然后新建个src/containers/NewsViewer.js,它就很简单了: import React from 'react' import {connect} from 'react-redux...()(App); 上面代码render方法里,除了放进去了Header,还要注意那个this.props.children,react-router就是把这个属性所对应组件作为App所对应路径下一级路由

    1.8K100

    React知识图谱

    Antd3 Form、react-redux connectreact-router withRouter等 传送门createPortal ReactDOM.createPortal(child,...它可以让你在不编写 class 情况下使用 state 以及其他 React 特性。 规则1:不要在循环,条件或嵌套函数中调用 Hook, 确保总是在你 React 函数最顶层调用他们。...使用场景如react-reduxconnect。 useContext 接收一个 context 对象(React.createContext 返回值)并返回该 context 的当前值。...• 异步 • redux-thunk:使用简单,但是容易形成“嵌套地狱” • redux-saga:使用“复杂”,但是能够用同步方式实现异步,内部使用了generator函数,比async await...路由管理库 react-router 目前最新版本是5.2.0: 根据url与组件映射关系切换组件显示 Router BrowserRouter:使用 HTML5 提供 history API

    35120
    领券