如何在 redux-saga 中导航路由器？

Question

version: "react-router-dom": "^4.1.2", “react-router-redux”：“^5.0.0-alpha.8”，

我可以通过这种方式在我的组件中成功导航路由器：

this.props.history.push('/cart')

然后我想在我的 saga.js 中导航路由器，我尝试了一些方法但它们都不起作用：

const history = createHistory();



yield call(history.push, '/cart')
yield call(put('/cart)//react-router-redux
history.push('/cart')

这些方法可以改变 url ，但页面不会呈现。 我添加了页面组件 withRouter ，它也不起作用。 有人可以帮助我谢谢！

这是我的一些设置：

const render = Component =>
  ReactDOM.render(
      <Provider store={store}>
        <AppContainer>
          <Component />
        </AppContainer>
      </Provider>
    ,
    document.getElementById('root')
  );

class App extends Component {

  render () {
    return (
      <ConnectedRouter history={history}>
        <div>
          <Header/>
          <Nav/>
          <ScrollToTop>
            <Route render={({location}) => (
              <ReactCSSTransitionGroup
                transitionName="fade"
                transitionEnterTimeout={300}
                transitionLeaveTimeout={300}>
                <div key={location.pathname} className="body">
                  <Route location={location} exact path="/" component={HomePageContainer}/>
                  <the other component>
                  .....
                </div>
              </ReactCSSTransitionGroup>)}/>
          </ScrollToTop>
          <Footer/>
        </div>
      </ConnectedRouter>
    )
  }
}

================================================= ==============

我通过这种方式解决了这个问题：用户路由器而不是 BroswerRouter，然后

 history.push('/somerouter')

Answer 1

您可以使用

push

中的

react-router-redux

方法。例如：

import { push } from "react-router-redux";

yield put(push('/')); /* inside saga generator function*/

Answer 2

您可以使用

browserHistory

的

react-router

。

import { browserHistory } from "react-router";

yield browserHistory.push("/"); //put the path of the page you want to navigate to instead of "/"

Answer 3

我找到了一个简单的解决方案。 将组件内部的 push 函数发送到 saga。

class App extends Component {
    foo = () => {
        const { dispatch } = this.props;

        dispatch({
            type: 'ADD_USER_REQUEST',
            push: this.props.history.push <<-- HERE
        });
    }

    render() { ... }
}

在传奇中，像这样使用推送：

function* addUser(action) {
    try {
        yield put(action.push('/users'));

    } catch (e) {
        // code here...
    }
}

Answer 4

最近不得不解决类似的问题。 react-router-redux 项目现在已弃用，所以我使用了 connected-react-router - 效果很好。

Answer 5

谢谢，但是“react-router-dom”的方法是什么：“6.3.0”版本