当前位置: 首页 > 面试题库 >

React Router V4无法与Redux一起使用

宋飞文
2023-03-14
问题内容

使用React Router
v4开发React应用程序。一切顺利,直到我在应用程序中引入了Redux。从那时起,单击更改路径的链接时,浏览器url发生更改,但是未加载与该路径相对应的组件。如果我注释掉Redux代码,它会很好地工作。是什么原因造成的?这是我的路由代码:

import React, { Component } from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import LeftSubDefault from './../components/left-sub-default.component';
import LeftSubOne from './../components/left-sub-one.component';
import LeftSubTwo from './../components/left-sub-two.component';
import { withRouter } from 'react-router-dom';
import { connect } from "react-redux";
import { goToLeftDefault, goToLeftOne, goToLeftTwo } from "./../actions/leftRouteActions.js";

class LeftComponent extends Component {
  render() {
    return (
      <div className="col-xs-6">
          <p>
            Current sub route: {this.props.currentRoute}
          </p>
          <ul>
            <li onClick={this.props.goToDefault}><Link to={'/'}>Go To Default</Link></li>
            <li onClick={this.props.goToSub1}><Link to={'/left-sub1'}>Go To One</Link></li>
            <li onClick={this.props.goToSub2}><Link to={'/left-sub2'}>Go To Two</Link></li>
          </ul>
          <Switch>
            <Route exact path='/' component={LeftSubDefault} />
            <Route exact path='/left-sub1' component={LeftSubOne} />
            <Route exact path='/left-sub2' component={LeftSubTwo} />
          </Switch>
      </div>
    );
  }
}
const mapStateToProps = (store) => {
  return {
    currentRoute: store.routes.currentRoute
  };
}
const mapDispatchToProps = (dispatch) => {
  return {
    goToDefault: () => {
      dispatch(goToLeftDefault())
    },
    goToSub1: () => {
      dispatch(goToLeftOne())
    },
    goToSub2: () => {
      dispatch(goToLeftTwo())
    }
  };
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(LeftComponent));

PS:控制台没有错误。代码运行干净,只是组件没有加载。这是github上的类似线程:4671。我在各种站点上看到了很多线程,但是没有一个线程可以解决此问题。


问题答案:

嗯,现在我也在用react-router和redux进行项目=)。

查看有关redux集成的官方文档https://reacttraining.com/react-router/web/guides/redux-
integration

我认为要点是withRouterconnectHocs的顺序。

问题是Redux实现了shouldComponentUpdate,如果没有从路由器接收道具,则没有任何迹象表明发生了任何变化。这很容易解决。查找连接组件的位置,然后将其包装在Router中。

来自官方文档。

UPD

import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

class Home extends React.Component {...}

export default withRouter(
    connect(mapStateToPropsFunc)(Home)
);


 类似资料:
  • 问题内容: 我的程序应该等待按下向左或向右箭头键,然后更改一个值,以便下次更新PaintComponent时,屏幕看起来有所不同。但是,运行该程序时,屏幕没有变化。 以下是变量声明: 这是主要的KeyListener声明: 这是用于绘画的方法: 当我运行该程序时,该程序会打印外壳,但是当我按箭头键时,屏幕上没有任何变化。 问题答案: 您需要先将关键侦听器添加到组件,然后才能调用它: 您还需要使组件

  • 问题内容: click事件可以正常运行,但是onmouseover事件不起作用。 问题答案: 您需要大写一些字母。

  • 问题内容: 我需要为我的应用程序读/写锁。我已阅读 https://en.wikipedia.org/wiki/Readers%E2%80%93writer_lock 并写了我自己的类,因为在swift中没有读/写锁 效果很好,直到我尝试从GCD线程使用它。 当我尝试在某个时刻从不同的异步块使用此类时,它允许在写入被锁定时进行写入 这是示例日志: 因此,您可以看到g被锁定,但是objc_sync_

  • 问题内容: 我在用Java做一个小Gui。我正在使用setBounds方法在JFrame上设置按钮等的位置,但是问题是,当我将JPanel按钮与JFrame一起使用时,在JFrame上不可见,并且如果没有JPanel也可以,请同时阅读代码,并请帮帮我我是初学者,正面临这些愚蠢的问题。 这个很好 当我将按钮添加到Jpanel时,相同的代码不起作用,所以怎么了,请指导我 请帮我解决这个小问题 问题答案

  • 我目前正在将IntelliJ IDE用于复杂的GWT项目。我想在GWT的开发模式中利用JRebel,所以最近我为IntelliJ安装了JRebel插件,但在使其工作时遇到了麻烦。 基本上IntelliJ不具备在更改时自动编译应用程序的能力,所以每当您对代码进行更改时,我都必须进行编译- 信息:使用JavaC1.7.0_21编译java源代码信息:15个错误信息:0个警告信息:编译完成,9分钟5秒内

  • 问题内容: 我使用以下代码将数据发送到MailChimp新闻列表(API v3)。每次我从函数中删除时,它都会尝试通过GET发布数据,并正确发送数据(在MailChimp API仪表板中可以确定响应)。在浏览器(FF)中进行测试时,我得到一个响应为“ true”的.part文件。 我将我的头发拔了出来,任何见识都将受到赞赏。 提前致谢, JN 问题答案: 主要问题是jc在您的原始帖子中评论了什么-