redux-saga에서 라우터를 탐색하는 방법에 반응 하시겠습니까?

Question

버전 : "반응 라우터-DOM을": "^ 4.1.2" "반응 - 라우터 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을 변경할 수 있지만 페이지 렌더링하지 않을 것입니다. 페이지 구성 요소를 루프와 함께 추가하면 작동하지 않습니다. 누군가 나를 도와 줄 수 있습니다! =================================

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

: 여기

내 일부 설정입니다 ==============

이 방법으로 문제를 해결했습니다 :

history.push('/somerouter') 

Answer 1

당신은 react-router-redux에서 push 방법을 사용할 수 있습니다. 예를 들어 :

는

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

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

Answer 2

당신은 react-router의 browserHistory를 사용할 수 있습니다.

import { browserHistory } from "react-router"; 

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

Answer 3

나는 간단한 해결책을 발견했다. 구성 요소 내부의 푸시 기능을 무용담으로 보냅니다. 사가 내부

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

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

    render() { ... } 
} 

, 그냥 같은 푸시 사용 : [반응 라우터와 REDUX-사가 사용]의

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

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