2017-11-03 34 views
0

版: "反応-ルータ-DOM": "^ 4.1.2"、 "反応 - ルータ - Reduxの": "^ 5.0.0-alpha.8"、redux-sagaのルーターをナビゲートする方法に反応しますか?

私は私の中で成功したルータをナビゲートすることができますこの方法によってコンポーネント:

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が、ページを変更することができますレンダリングしません。 iは、ページコンポーネントの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') 
+0

可能な複製(https://stackoverflow.com/questions/45878719/ ) –

+0

いやを-Reduxの-佐賀と反応し、ルータを使用して、私はその質問を見てきましたし、それは私のために動作しない、ページがレンダリングまだ –

答えて

1

あなたはreact-router-reduxからpushメソッドを使用することができます。たとえば:

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

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

ページをレンダリングしていないではないでしょう –

0

あなたはreact-routerbrowserHistoryを使用することができます。

import { browserHistory } from "react-router"; 

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

私は単純な解決策を見つけました。 は佐賀コンポーネントの内部にあるプッシュ機能をディスパッチ。

サガインサイド
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... 
    } 
} 
関連する問題