React-Router Redirect ist Looping über Komponenten in Meteorjs

Question

Ich experimentiere auf benutzerdefinierte Admin-Ansichtsseite und habe eine Frage über das Verhalten.

Die aktuelle Logik im Moment ist:

• Wenn der Benutzer nicht authentifiziert in und versucht /admin-Panel oder seine Kinder besuchen er/sie zu /& Login-Seite umgeleitet wird .
• Wenn Benutzer angemeldet und Besuche /& (Anmeldeseite) er/sie zu /admin-Panel umgeleitet wird

Das Problem ist, wenn der Benutzer in ist lodded und ist auf /Admin-Panel und die Seite neu geladen geschieht folgendes:

1. Erste /& Seite geladen
Dann
2. /& leitet Benutzer /admin-Panel Wenn der Benutzer war oder /admin-Panel/child_component nach dem Neuladen er/sie auf /admin-Panel sein und muss navigieren wieder zu /child_component

können Sie mir bitte erklären, was ist die Ursache für das aktuelle Verhalten und wenn es eine Möglichkeit, benutzer Aufenthalt auf der Seite der reload wurde initiiert und kann die konstante Umleitung vermeiden zu machen?

Die Login-Seite /&

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; 

React-Router Pfad:

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

Zunächst einmal habe ich losgeworden /& Route und jetzt die Admin-Authentifizierung Routen sehen wie folgt aus:

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

So in der Admin-Route, die Sie wenn Anweisung zum Prüfen, ob Benutzer definieren Reagieren sie angemeldet ist kehrt log-in Form

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

Also, wenn der Administrator nicht in, und wenn er/sie ist logg. angemeldet ist in das Loch Komponente sieht so aus Ed in der Komponente gibt AdminNavigation für die weitere Interaktion mit Daten zurück. Tracker überprüft den Status des Benutzers und wenn der Button Abmelden (in AdminNavigation) angeklickt wird, wird die Seite neu geladen (mit browserHistory.push) und die AdminNavigation Komponente wird durch das Login Formular ersetzt.

Answer 2

ich Ihre Routen-Datei in der folgenden Art und Weise ändern würde: So

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

Wir haben die verschachtelten "Router" -Komponenten los, die y Sie hatten dort und haben eine "AdminPanel" -Komponente hinzugefügt.

Eine der Sachen, die ich normalerweise tue, ist, meinen Apps eine IndexRoute zuzuweisen. Sie können das nachsehen und es bietet vielleicht einen Vorteil, ich habe es nicht hinzugefügt, da Sie es nicht in Ihrem Code hatten.

Eine weitere Effizienz (IMO) ist zu nisten Ihre Admin-Routen als solche:

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

Beachten Sie, dass der Admin-Panel in dem Admin-Weg dorthin so verschachtelt ist, es wäre/admin/admin_panel. Außerdem würde ich "" anstelle von "" verwenden.