反応ルータを使用した認証ベースのリダイレクト

Question

私はReactを初めて使用しています。私のプロジェクトでは、反応ルータを使用してルートを定義しました。しかし、私は条件に基づいてリダイレクトされる同じパスを持っています。私は以下のようにconditonal演算子を入れてみましたが、ブロックと同様にうんざりしていました。条件に基づいて同じパスで異なるコンポーネントをレンダリングする方法。あなたのルートを保護するために反応し、ルータをonEnterフックを使用することができます

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

。

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

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

希望します。

Answer 2

リダイレクトのためにあなたはonEnter

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

使用するかは、あなたが同じことを好む場合は役割や他のもの

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

をチェックするHOC（高次成分）を使用することができます除外コンポーネントのパス、一部の条件ベースで

<Route path="/" component={role===undefined ? Login : Home} /> 

還元型を使用している場合は、redux-auth-wrapperを使用できます。 onEnterメソッドに比べていくつかの利点があります。