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

Posted 2023-02-21

【中文标题】反应如何在 redux-saga 中导航路由器？

【英文标题】：react how to navigate router in redux-saga?

【发布时间】：2018-04-15 15:48:42

【问题描述】：

版本：“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 ，但页面不会呈现。 我用Router添加了页面组件，它也不起作用。 谁能帮帮我谢谢！

这是我的一些设置：

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

【问题讨论】：

Using redux-saga with react-router的可能重复

是的，我已经看到了这个问题，但它对我不起作用，页面不会呈现

【参考方案1】：

您可以使用react-router-redux 中的push 方法。例如：

import  push  from "react-router-redux";

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

【讨论】：

页面仍未呈现

【参考方案2】：

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

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

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

    render()  ... 

在 saga 中，只需像这样使用 push：

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

     catch (e) 
        // code here...
    

【参考方案3】：

您可以使用browserHistory 或react-router。

import  browserHistory  from "react-router";

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