Javascript 反应路由器<；链接>；组件没有'；连接redux商店后，无法应用activeStyle

我最近开始学习React/Redux，现在我正在尝试构建一个小的单页应用程序

最近我遇到了一个我不理解也无法解决的问题

让我向您展示代码：

index.js

从“React”导入React
从“react dom”导入react dom
从“redux”导入{createStore，CombineReducer}
从“react redux”导入{Provider}
从“react Router”导入{Router，Route，IndexRoute，hashHistory}
从“react router redux”导入{syncHistoryWithStore，routerReducer}
从“./components/App”导入应用程序
从“./components/Home”导入主页
从“./components/About”导入关于
const reducer=（state={}，action）=>{
返回状态
}
const store=createStore(
组合传感器({
减速器，
路由：路由导出器
})
)
const history=syncHistoryWithStore（hashHistory，store）
ReactDOM.render((
)，document.getElementById（'root'））

基本上，这是ToGithub页面的示例（向下滚动到教程部分）-唯一的区别是，我使用的是hashHistory

App.js

import React，{Component，PropTypes}来自“React”
从“./Navigation”导入导航
导出默认类应用程序扩展组件{
render（）{
返回(
{this.props.children}
)
}
}
App.propTypes={
子项：PropTypes.node
}

Navigation.js

import React，{Component}来自“React”
从“反应路由器”导入{Link，IndexLink}
导出默认类导航扩展组件{
render（）{
返回(

家
关于

)
}
}

“主页”和“关于”组件只是呈现标题以可视化SPA的状态

到目前为止，一切正常，正如你所期望的那样！当用户单击About链接时，URL会相应地更改，链接会变为红色（因为activeStyle属性）

但我的问题来了（谢谢你继续阅读此btw）：

我想通过react reduxconnect（）包装我的组件。这是我的新版本

Navigation.js

import React，{Component}来自“React”
从“react redux”导入{connect}
从“反应路由器”导入{Link，IndexLink}
类导航扩展了组件{
render（）{
返回(

家
关于

)
}
}
const NavigationContainer=connect（）（导航）
导出默认导航容器

但是现在activeStyle功能似乎被破坏了。。。当我浏览我的应用程序时，当前活动的链接不再改变其颜色

我真的花了好几个小时来解决这个问题：（非常感谢您的帮助！

react redux的connect（）阻止导航以及随后的链接在位置状态更改时重新提交

如果在导航的渲染中添加

console.log（“导航渲染”）

，您将看到在添加connect（）func之后，组件不会在位置状态更改时重新渲染

---

有办法避免它

1.way:为了在位置更改时重新呈现导航comp，您可以添加prop，类似于

location={this.props.location}

export default class App extends Component {
  render() {
    return (
      <div>
        <Navigation location={this.props.location}/>

        {this.props.children}
      </div>
    )
  }
}

---

---

3.方式：这在React路由器3.0.0-alpha.1及更新版本中已修复。

我在MobX.React中遇到类似问题-router@3.0.0-alpha.3似乎能工作，而2.x却不能。这需要用React路由器更好地记录。起初，人们可能认为这不是他们的，而用Redux的Connect（）来纠正罪魁祸首。但显然他们对3.0.0-alpha.x进行了更改。在@ultro中偶然发现这个问题之前，我都快发疯了。我一直在寻找这个答案。很高兴知道它在3中得到了修复。在升级之前，我一直在使用垃圾超时函数forceUpdate（）。

import React, { Component, PropTypes } from 'react'

import Navigation from './Navigation'

export default class App extends Component {
  render() {
    return (
      <div>
        <Navigation/>

        {this.props.children}
      </div>
    )
  }
}

App.propTypes = {
  children: PropTypes.node
}

import React, { Component } from 'react'
import { Link, IndexLink } from 'react-router'

export default class Navigation extends Component {
  render() {
    return (
      <ul role='nav'>
        <li><IndexLink to='/' activeStyle={{ color: 'red' }}>Home</IndexLink></li>
        <li><Link to='/about' activeStyle={{ color: 'red' }}>About</Link></li>
      </ul>
    )
  }
}

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link, IndexLink } from 'react-router'

class Navigation extends Component {
  render() {
    return (
      <ul role='nav'>
        <li><IndexLink to='/' activeStyle={{ color: 'red' }}>Home</IndexLink></li>
        <li><Link to='/about' activeStyle={{ color: 'red' }}>About</Link></li>
      </ul>
    )
  }
}

const NavigationContainer = connect()(Navigation)

export default NavigationContainer

export default class App extends Component {
  render() {
    return (
      <div>
        <Navigation location={this.props.location}/>

        {this.props.children}
      </div>
    )
  }
}

export default connect(mapStateToProps, actions, null, { pure: false })(Navigation);