React-routerリダイレクトがMeteorjsのコンポーネントをループしています

Question

私はカスタム管理ビューページを試していますが、その動作に関する質問が1つあります。

現時点では、現在のロジックは次のとおりです。

• 認証され、彼/彼女が/&ログインページにリダイレクトされます/管理者パネルやその子供たちを訪問しようとしないで、ユーザ場合。
• 場合はログインしたユーザの訪問/&（ログインページ）彼/彼女が/管理者パネルにリダイレクトされます問題は、ユーザーがloddedと上でされている

/管理者パネルとは、次のことが起こるのページリロードする：

1. まず/&ページの負荷を
2. その後/&ユーザーは、彼/彼女が/管理者パネルになり、ナビゲートする必要があります上にあったか、リロード後/管理者パネル/ child_component場合/管理者パネル にユーザーをリダイレクトします再び/child_component

に現在の行動の原因が何であるかを説明していただけますと、ページ上でユーザーの滞在をするためにいくつかの方法がある場合は、リロードを開始し、一定のリダイレクトを回避することができますか？

ログインページ/&

import React, { Component } from 'react'; 
import { Link, browserHistory } from 'react-router'; 
import { Tracker } from 'meteor/tracker' 

class Backdoor extends Component { 

    onSubmit(event) { 
    event.preventDefault(); 

    // Collecting user input 
    const self = this; 
    const email = $(event.target).find('[name=email]').val(); 
    const password = $(event.target).find('[name=password]').val(); 

    Meteor.loginWithPassword(email, password, function (err) { 
     browserHistory.push('admin-panel'); 
    }); 
    } 

    componentWillMount(){ 
    Tracker.autorun(() => { 
     if (Meteor.user()) { 
     browserHistory.push('/admin-panel') 
     } else if(!Meteor.user()) { 
      browserHistory.push('/&') 
     } 
    }) 
    } 

    render() { 
    return (

    // Login form 
    ); 
    } 
} 

export default Backdoor; 

リアクト・ルータのパス：

const routes = (
    <Router history={browserHistory}> 

    <Route path='/' component={App}> 
     <Router path='about' component={About} /> 
    </Route> 

    <Route path='&' component={Backdoor} /> 

    <Route path='admin' component={AdminPanel}> 
     <Router path='/admin/admin_component' component={AdminChild} /> 
    </Route> 

    </Router> 

Answer 1

私は今認証ルートはそのように見える管理/&ルートを処分したとしたすべての最初に：あなたは、ユーザーかどうかをチェックするための if文を定義し、管理者のルート内だから、

const newRoutes = (

<Router history={browserHistory}> 
    <Route path='/' component={App}> 
    <Router path='about' component={About} /> 
    </Route> 
    <Route path='/admin' component={Admin} > 
    <Route path='/admin/admin_child' component={AdminChild} />\ 
    // Feel free to add more routes here 
    </Route> 
</Router> 
); 

をログインしている穴のコンポーネントは、次のようになります。管理者がログインしていない場合

export class Admin extends Component { 

    componentWillMount(){ 
    Tracker.autorun(() => { 
     if(!Meteor.userId()) { 
      browserHistory.push('/admin') 
     } 
    }) 
    } 

    render(props) { 
    if (Meteor.userId()){ 
     return (<div><JuliaNav />{this.props.children}</div>) 
    } else { 
     return (<div><Backdoor /></div>) 
    } 
    } 
} 

だからリターンはログインフォーム反応し、彼/彼女はloggある場合コンポーネント内のedはAdminNavigationを返し、データとのさらなる対話を行います。 トラッカーはユーザーの状態をチェックし、「ログオフ」ボタン（AdminNavigation内）がクリックされると、ページが再ロードされ（browserHistory.pushで）、AdminNavigationコンポーネントがログインフォームに置き換えられます。

Answer 2

私はあなたのルートを変更します

は、以下の方法でファイル：だから

const routes = (
    <Router history={browserHistory}> 
    <Route path='/' component={App}> 
     <Route path='about' component={About} /> 
     <Route path='&' component={Backdoor} /> 
     <Route path='admin' component={Admin} /> 
     <Route path='admin/admin_component' component={AdminChild} /> 
     <Route path='admin/admin_panel' component={AdminPanel} /> 
    </Route> 
</Router> 
); 

私たちはネストされた "ルータ"コンポーネントを取り除きました。その中に「AdminPanel」コンポーネントが追加されました。

私が通常行うことの1つは、アプリケーションにIndexRouteを割り当てることです。あなたはそれを見ることができ、それはあなたのコードでそれを持っていないので、私はそれを追加していないいくつかの利点を提供するかもしれません。管理パネルは、それが/管理/ admin_panelになりそうそこには、adminルートにネストされていることを

const routes = (
    <Router history={browserHistory}> 
    <Route path='/' component={App}> 
     <Router path='about' component={About} /> 
     <Route path='&' component={Backdoor} /> 
     <Route path='admin' component={Admin}> 
     <Route path='/admin_component' component={AdminChild} /> 
     <Route path='/admin_panel' component={AdminPanel} /> 
     </Route> 
    </Route> 
</Router> 
); 

注：

別の効率は、（IMO）などの巣にあなたの管理者のルートです。また、 ""の代わりに引用符を使用します。