Auth basierte Umleitung mit React-Router

Question

Ich bin neu in React, In meinem Projekt habe ich React-Router verwendet, um die Routen zu definieren. Ich habe jedoch denselben Pfad, der basierend auf der Bedingung umgeleitet werden muss. Ich habe versucht, Conditional Operator wie unten zu setzen, aber dint Arbeit, müde mit, wenn auch block.Wie verschiedene Komponenten mit dem gleichen Pfad basierend auf einer Bedingung zu rendern.

var Routes = (
 
    <Router history={hashHistory}> 
 
     {role === undefined ? (
 
      <Route path='/' component={Login} /> 
 
      ): 
 
      <Route path='/' component={Home}> 
 
       <Route path='category' component={About}/> 
 
       <Route path='input' component={Cate} /> 
 
       <Route path='charts' component={Chart}/> 
 
       <Route path='buyerHome' component={customer}/> 
 
      </Route> 
 
     } 
 
    </Router> 
 
);

Answer 1

können Sie verwenden onEnter Haken reagieren-Router die Route zu schützen.

<Route path='/' component={Home} onEnter={requireAuth}> 

function requireAuth(nextState, replace) { 
    if (!role) { 
    replace({ 
     pathname: '/login', 
     state: { nextPathname: nextState.location.pathname } 
    }) 
    } 
} 

Hoffe, das hilft.

Answer 2

für Umleitung können SieonEnter

const checkRole = (nextState, replace)=>{ 
    if(role === undefined) replace('/login') 
}; 

<Route path='/' component={Home} onEnter={checkRole}> 
    <Route path='category' component={About}/> 
     ... 
</Route> 
<Route path='/login' component={Login} /> 

oder Sie können HOC verwenden (High Auftragskomponente) verwenden Rolle und andere Sachen

const CheckRole = Comp => class extends React.Component{ 
    componentWillMount(){ 
     if(role===undefined) hashHistory.replace('/signup'); 
    } 
    render(){ 
     return <Comp {...this.props}/>; 
    } 
}; 

<Route path='/' component={CheckRole(Home)}> 
    <Route path='category' component={About}/> 
    ... 
</Route> 
<Route path='/login' component={Login} /> 

wenn Sie die gleiche lieber überprüfen Pfad für verschiedene Komponenten, unter bestimmten Bedingungen

Wenn Sie redux verwenden, können Sie redux-auth-wrapper verwenden. und es hat einige Vorteile gegenüber OnEnter-Methode.