Question

版本：“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')

这些方法可以更改网址，但页面无法呈现。我添加页面组件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的{{1}}。

react-router

Answer 3

我找到了一个简单的解决方案。将组件内部的推送功能发送到传奇。

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

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

3 个答案: