reactjs内の同じルートパスを持つ条件付きコンポーネントを使用

Question

ユーザーがログインした後にレンダリングされる<Dashboard/>という2つのコンポーネントがあります。 reactjsでは、私は何をすべきですか私は同じ/ルートを使用したい場合、ユーザーがまだログインしていない場合は<Landing/>をレンダリングし、ユーザーがログインしている場合は<Dashboard/>をレンダリングしますか？

<Landing/>は

<Route path="/" component={Landing} onEnter={appOnEnter}> 
    <IndexRoute component={Home}/> 

    ... Other not-login-required routes ... 
</Route> 

とDashboardが使用することをお勧めしていないよう

<Route path="/" component={Dashboard} onEnter={appOnEnter}> 
    <IndexRoute component={Home} /> 

    ... Other login-required routes ... 
</Route> 

私は私が

<Route path="/" getComponent={(nextState, cb) => { 
// do asynchronous stuff to find the components 
cb(null, Course) 
}} /> 

しかしthisように使用することができると思うgetComponent/getComponents accrossに来たですその方法

我々は明示的にパターンのこの種をサポートしていない理由は、それがこのよう

物事を配線するかなり非定型だからだから何が私が欲しいものを達成するための最良の方法だろうですか？

Answer 1

あなたは、ルートレベルでそれに対処する必要はありません。そのようにそのルートのHomeコンポーネントを作成し、

return this.props.loggedIn ? <Dashboard /> : <Login />; 

ことができます。でも作品かかわらず、掲載@Andy_D答えは実際に私のユースケースを満たしていない

Answer 2

ので、私は私がのために異なるレイアウトを使用するため、このよう

... 

/** 
* Layouts 
* 
* i separate the main layout into two parts 
* - Guest, base layout used to any page or route for guests 
* - Member, base layout used to any page or route for members 
*/ 
import Guest from './Layouts/Guest' 
import Member from './Layouts/Member' 

... 

const Routesz = (store, actions) => { 
    const GuestRoute =() => (
    <Route path="/"> 
     <Route component={Guest.components.Layout}> 
     <Route 
      path="/signin" 
      component={SigninComponent} 
     /> 
     <Route 
      path="/signup" 
      component={SignupComponent} 
     /> 
     </Route> 
    </Route> 
) 

    const MemberRoute =() => (
    <Route path="/"> 
     <Route component={Member.components.Layout}> 
     <IndexRoute component={DashboardComponent}/> 

     <Route path="post" component={SomeParentComponent} name="Service"> 
      <IndexRoute 
      component={SomeChildComponent_1} 
      /> 
      <Route 
      path="add" 
      component={SomeChildComponent_2} 
      /> 
      <Route 
      path=":id/edit" 
      component={SomeChildComponent_3} 
      /> 
      <Route 
      path=":id/remove" 
      component={SomeChildComponent_4} 
      /> 
     </Route> 
     </Route> 
    </Route> 
    ) 

    const MainRoutes =() => (
    isAuthorized() 
     ? MemberRoute(actions) 
     : GuestRoute(actions) 
) 

    return MainRoutes(actions) 
} 

export default (store) => { 
    return (
    <Route> 
     {Routesz(store, actions)} 
     ... 
    </Route> 
) 
} 

は現在、これは十分な柔軟性があり、それをやってしまいました別のページ