React-Router <Link> 连接后组件未应用 activeStyle redux-store

Question

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

最近我运行遇到了一个我不明白也无法解决的问题。

让我给你看代码：

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'

import App from './components/App'
import Home from './components/Home'
import About from './components/About'

const reducer = (state = {}, action) => {
  return state
}

const store = createStore(
  combineReducers({
    reducer,
    routing: routerReducer
  })
)

const history = syncHistoryWithStore(hashHistory, store)

ReactDOM.render((
  <Provider store={store}>
    <Router history={history}>
      <Route path='/' component={App}>
        <IndexRoute component={Home}/>

        <Route path='about' component={About}/>
      </Route>
    </Router>
  </Provider>
), document.getElementById('root'))

基本上这是来自 react-router-redux GitHub 页面的示例（向下滚动到教程部分）- 唯一的区别是，我我正在使用 hashHistory.

App.js

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
}

Navigation.js

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>
    )
  }
}

Home 和 About 组件只是渲染一个

标题来可视化 SPA 的状态。

到目前为止，一切正常，如您所料！当用户单击 About link 时，URL 会相应更改并且 link 变为红色（因为 activeStyle 属性） .

但是我的问题来了（顺便说一句，感谢您仍然阅读这篇文章）：

我想通过 react-redux connect() 包装我的组件。所以这是我的新版本

Navigation.js

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

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

我真的花了几个小时试图解决这个问题:(非常感谢任何帮助！

Answer 1

react-redux 的 connect() 阻止 Navigation 和随后的链接在位置状态更改时重新呈现。

如果您在 Navigation 的 render 中添加 console.log("Navigation render") ，您将看到在添加 connect() 函数后，组件不会在位置状态更改时重新呈现。

有办法避免

1.way: 为了在位置变化时重新渲染 Navigation 组件，您可以添加 prop ，类似 location={this.props.location}

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

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

2.way: 添加 {pure:false} 到 connect()。 DOCS LINK

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

3.way: 这已在 React Router 3.0.0-alpha.1 及更新版本中修复。

React-Router <Link> 连接后组件未应用 activeStyle redux-store

React-Router <Link> component doesn't get activeStyle applied, after connecting redux-store

javascript

reactjs

react-router

redux

react-router-redux

index.js

App.js

Navigation.js

Navigation.js