react-router-redux，推送方法不起作用

Question

我正在使用react-router-redux。

我不知道如何创建演示来简单地描述这个问题。我在Github上推送所有代码。https://github.com/jiexishede/newReactSOAskDemo001

a-href工作正常。@https://github.com/jiexishede/newReactSOAskDemo001/blob/ask1/src/components/Home/Preview.js/#L37

现在，推送方法不起作用。

@https://github.com/jiexishede/newReactSOAskDemo001/blob/ask1/src/components/Home/Preview.js/#L30

我编辑代码并在GitHub上更新它。

我导入hashHistory。

https://github.com/jiexishede/newReactSOAskDemo001/blob/286fc0e07f9d9c863f7c4fc8d9b2c09a2c45e231/src/components/Home/Preview.js#L9

hashHistory.push('detail/'+id);工作得很好。https://github.com/jiexishede/newReactSOAskDemo001/blob/286fc0e07f9d9c863f7c4fc8d9b2c09a2c45e231/src/components/Home/Preview.js#L32

disPatchpush @https://github.com/jiexishede/newReactSOAskDemo001/blob/286fc0e07f9d9c863f7c4fc8d9b2c09a2c45e231/src/components/Home/Preview.js#L31它不工作。

在Home.js中

  @connect(state => {
  return {
    list:state.home.list,

  };
}, dispatch => {

  return {
    actions: bindActionCreators(actions, dispatch),
    dispatchPush:  bindActionCreators(push, dispatch),
  }
})

dispatchPush从Home.js传递到PreviewList，再传递到Preview。

Answer 1

你试过了吗？

handleClick(e) {
   e.preventDefault();
   this.props.history.push('/#/detail/' + id);

}

告诉我它是否工作，并会相应地更新答案。

或者，如果您想尝试在组件之外导航，请尝试this。

还可以尝试设置路由：

 <Route path="/preview" component={Preview} />

这可能会让你得到历史道具。

Answer 2

你想routerMiddleware了。在应用routerMiddleware之后工作得很漂亮。

import { browserHistory } from 'react-router';
import { routerReducer, routerMiddleware } from 'react-router-redux';
...
const finalCreateStore = compose(
  applyMiddleware(
      ThunkMiddleware, 
      FetchMiddleware, 
      routerMiddleware(browserHistory)
  ),
  DevTools.instrument(),
)(createStore);


const reducer = combineReducers({
  ...rootReducer,
  routing: routerReducer,
});

export default function configureStore(initialState) {
  const store = finalCreateStore(reducer, initialState);
  return store;
}

阅读文档的这一部分- https://github.com/reactjs/react-router-redux#what-if-i-want-to-issue-navigation-events-via-redux-actions

Answer 3

如果您想导航到另一条路线，请尝试Proptype，如下所示：

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

class Preview extends Component {
        ...
  static contextTypes = {
    router: PropTypes.object
  };
  handleNavigate(id,e) {
    e.preventDefault();
    this.context.router.push(`/#/detail/${id}`);
  }
        ...
}