javascript – 连接redux-store后,React-Router组件未应用activeStyle

我最近开始学习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组件只是呈现< h1>标题可视化SPA的状态.

到目前为止,一切正常,正如您所期望的那样！当用户单击“关于”链接时,URL会相应更改,并且链接将变为红色(因为activeStyle属性).

但是这里出现了我的问题(感谢仍然阅读这个顺便说一句)：

我想包装我的< Navigation>组件via 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功能似乎已被破坏……当我浏览我的应用程序时,当前活动的链接不再改变其颜色.

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

解决方法:

react-redux的connect()阻止导航和随后的链接重新发布位置状态变化.

如果在Navigation的渲染中添加console.log(“Navigation render”),您将看到在添加connect()func之后,组件不会在位置状态更改时重新渲染.

有办法避免它

1.way：为了在位置更改时重新渲染Navigation comp,你可以添加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和更新版本中得到修复.

标签：javascript,reactjs,redux,react-router,react-router-redux
来源： https://codeday.me/bug/20190722/1502646.html