反応ルータのルートonChange無限のパスを置換する

Question

rootのonEnterまたはonChangeフックでパスを変更すると、URLが無限に変わるようです。しかし、私が子供のルートでパスを変更すると、それは動作します。実際には、認証を1か所で処理したい場合は、すべての子ルートが同じロジックを処理する必要があります。

{ 
    path: '/', 
    onChange: function(prevState, nextState, replace, callback) { 
     if(!logined) { 
      replace('login'); 
     } 
    }, 
    childRoutes: [ 
     .... 
    ] 
} 

Answer 1

それは、onChange 1つの場所で認証を処理することも

onChange: function(prevState, {location:{pathname:next}}, replace)=> { 
     if(!logined && next !== '/login') { 
      replace('/login'); 
     } 
} 

を試してみてくださいreplace

を呼び出しますので、あなたはHOCを使用することができますinfinitlyその

const CheckAuth = (isLogined, redirectPath) => Component => 
class CheckAuth extends React.Component { 
    componentWillUpdate(nextProps, nextState){ 
     //Check auth on change 
     this.checkAuth(nextProps); 
    } 
    componentWillMount(){ 
     //Check auth on enter 
     this.checkAuth(this.props); 
    } 
    checkAuth({location}){ 
     if(!isLogined && location.pathname!==redirectPath) { 
      browserHistory.replace(redirectPath); 
     } 
    } 
    render(){ 
     return (<Component {...this.props}/>); 
    } 
}; 

のようなものを変更します

およびAppコンポーネント

class App extends React.Component { ... } 
export default CheckAuth(isLogined,'/login')(App); 

また、redux-auth-wrapper

と方法があります