React-router 리디렉션이 Meteorjs의 구성 요소를 반복합니다.

Question

사용자 지정 관리보기 페이지에서 실험 중이며 동작에 대해 하나의 질문이 있습니다.

순간에 현재의 논리는 다음과 같습니다 인증 및 시도하지에 사용자가 /관리자 패널 또는 그 아이 그/그녀가 /& 로그인 페이지로 리디렉션됩니다를 방문

• 경우 .
• 하면 로그인과에 사용자가 방문 /& (로그인 페이지) 그/그녀가 /관리자 패널로 리디렉션됩니다 문제는 사용자에 lodded 및 에 있습니다

/관리자 패널과는 다음이 발생하는 페이지 다시로드 :

1. 먼저 /& 페이지가로드를
사용자가 켜져 또는 /관리자 패널/다시로드 후 child_component가 그/그녀가 /관리자 패널에있을 것입니다 및 이동해야 할 경우
2. 그런 다음 /&는 /관리자 패널 로 사용자를 리디렉션 다시

당신이 무엇을 현재의 행동의 원인과 페이지에 사용자 숙박을 할 수있는 방법이 있다면 다시로드가 시작되었다 상수 리디렉션을 피할 수 설명해 주시겠습니까 /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

우선은 /& 경로를 제거 있는데 이제 관리자 인증 노선들은 그 모양 :

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

우리는 중첩 된 "라우터"구성 요소를 없앴습니다. ou는 거기에 있었고 "AdminPanel"구성 요소를 추가했습니다.

내가 일반적으로하는 일 중 하나는 내 앱에 IndexRoute를 할당하는 것입니다. 당신은 그것을 볼 수 있고 그것은 약간의 이점을 제공 할 수도 있습니다, 당신이 당신의 코드에 없었기 때문에 그것을 추가하지 않았습니다.

또 다른 효율 (IMO)는 당신의 관리자 경로는 다음과 같은 둥지입니다 : 관리자 패널이 그래서 것/관리/admin_panel 거기에 도착하기 위해 관리 경로에 중첩되어

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

하는 것으로. 또한, 대신 ""따옴표를 사용합니다.모든