2

Es scheint, wenn ich den Pfad im root onEnter oder onChange Hook ändern, wird die URL unendlich ändern. Aber wenn ich den Pfad in untergeordneten Routen ändere, wird es funktionieren. Eigentlich möchte ich die Authentifizierung an einer Stelle behandeln, sonst sollte jede untergeordnete Route die gleiche Logik behandeln.react-router root onChange zu ersetzen Pfad unendlich

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

Antwort

0

Es ändert infinitly weil onChange auf replace

ruft

versuchen

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

auch die Authentifizierung an einem Ort zu behandeln, können Sie HOC verwenden, so etwas wie dieses

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

und App-Komponente

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

auch, gibt es eine Möglichkeit, mit redux-auth-wrapper

Verwandte Themen