प्रतिक्रिया-राउटर का उपयोग कर रूट्स पर शीर्ष स्तर घटक स्थिति कैसे पास करते हैं?

Question

मैंने react-router का उपयोग कर एक प्रतिक्रिया ऐप स्थापित किया है जो फ़ायरबेस के साथ प्रमाणित करता है।

मेरे पास यह काम है लेकिन अब मैं मुख्य App घटक से लॉग इन उपयोगकर्ता (एथ) की स्थिति का प्रबंधन करने में सक्षम होना चाहता हूं, और यह ऑथ स्थिति पूछने के बजाय बच्चे के घटक को पास कर सकता है प्रत्येक घटक में।

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, Link, browserHistory } from 'react-router'; 
import { createHistory } from 'history'; 

/* 
    Firebase 
*/ 
import Auth from './modules/Auth'; 
import Helpers from './modules/Helpers'; 

// Auth.unauth(); 
/* 
    Import app modules 
*/ 
import LogIn from './modules/LogIn'; 
import LogOut from './modules/LogOut'; 
import NotFound from './modules/NotFound'; 
import Register from './modules/Register'; 
import Dashboard from './modules/Dashboard'; 
import ResetPassword from './modules/ResetPassword'; 
import ChangePassword from './modules/ChangePassword'; 
import MyAccount from './modules/MyAccount'; 


const App = React.createClass({ 

    getInitialState: function() { 
    return { 
     loggedIn: Auth.getAuth(), 
     userType: null 
    } 
    }, 

    setUserLevel: function(authData) { 
    if(authData){ 
     Auth.child('users/'+authData.uid+'/user_level').once('value', 
     (snapshot) => { 
      this.setState({ userType: Helpers.getUserType(snapshot.val()) }) 
     }, 
     (error) => { 
      this.setState({ 
      userType: Helpers.getUserType(0), 
      error: error 
      }); 
     } 
    ); 
    } 
    }, 

    updateAuth: function(loggedIn) { 
    // console.log('Updating Auth'); 

    this.setUserLevel(loggedIn); 

    this.setState({ 
     loggedIn: loggedIn 
    }) 
    }, 

    componentWillMount: function() { 
    Auth.onAuth(this.updateAuth); 
    }, 

    render: function() { 

    var regButton = (this.state.loggedIn) ? null : (<Link className="Navigation__link" to="register">Register</Link>); 
    var accountButton = (this.state.loggedIn) ? (<Link className="Navigation__link" to="account">My Account</Link>) : null; 

    return (
    <div> 
     <nav className="Navigation"> 
     {this.state.loggedIn ? (
      <Link className="Navigation__link" to="/logout">Log out</Link> 
     ) : (
      <Link className="Navigation__link" to="/login">Sign in</Link> 
     )} 
     {regButton} 
     {accountButton} 
     <Link className="Navigation__link" to="dashboard">Dashboard</Link> 
     </nav> 
     <div> 
     {this.props.children} 
     </div> 
    </div>); 
    } 
}) 


function requireAuth(nextState, replaceState) { 
    if (!Auth.getAuth()) 
    replaceState({ nextPathname: nextState.location.pathname }, '/login') 
} 

function notWhenLoggedIn(nextState, replaceState) { 
    if (Auth.getAuth()) 
    replaceState({ nextPathname: nextState.location.pathname }, '/dashboard') 
} 

var routes = (
    <Router history={createHistory()}> 
    <Route path="/" component={App}> 
     <Route path="/login" component={LogIn} onEnter={notWhenLoggedIn} /> 
     <Route path="/logout" component={LogOut} onEnter={requireAuth} /> 
     <Route path="/register" component={Register} onEnter={notWhenLoggedIn} /> 
     <Route path="/resetpassword" component={ResetPassword} onEnter={notWhenLoggedIn} /> 
     <Route path="/change-password" component={ChangePassword} onEnter={requireAuth} /> 
     <Route path="/dashboard" component={Dashboard} onEnter={requireAuth} /> 
     <Route path="/account" component={MyAccount} onEnter={requireAuth} /> 
     <Route path="*" component={NotFound} /> 
    </Route> 
    </Router> 
) 

ReactDOM.render(routes, document.querySelector('#main')); 

मैं अब अटक आए हैं के रूप में मैं नीचे बच्चे घटकों पर गुण के रूप में नीचे App घटक के loggedIn state पारित करने के लिए एक तरह से नहीं मिल रहा।

क्या यह react-router के साथ भी संभव है?

Answer 1

the React.Children utility का उपयोग करने का तरीका सबसे अच्छा तरीका है। कार्रवाई में अवधारणा को देखने के लिए यहां एक त्वरित कोडपेन है। http://codepen.io/anon/pen/RrKbjZ

तो आपके उदाहरण में App घटक के render() फ़ंक्शन में कोड कुछ ऐसा दिखाई देगा।

render: function() { 

    var regButton = (this.state.loggedIn) ? null : (<Link className="Navigation__link" to="register">Register</Link>); 
    var accountButton = (this.state.loggedIn) ? (<Link className="Navigation__link" to="account">My Account</Link>) : null; 
    var childrenWithProps = React.Children.map(this.props.children, (Child, i) => { 
    return React.cloneElement(Child, { 
     loggedIn: this.state.loggedIn 
    }); 
    }); 

    return (
    <div> 
     <nav className="Navigation"> 
     { 
      this.state.loggedIn ? 
      (<Link className="Navigation__link" to="/logout">Log out</Link>) : 
      (<Link className="Navigation__link" to="/login">Sign in</Link>) 
     } 
     {regButton} 
     {accountButton} 
     <Link className="Navigation__link" to="dashboard">Dashboard</Link> 
     </nav> 
     <div> 
     {childrenWithProps} 
     </div> 
    </div> 
); 
} 

Answer 2

मुझे पहले भी यही समस्या है। यह समस्या आपकी मदद कर सकती है।

https://github.com/rackt/react-router/issues/1857

हालांकि, पैरामीटर गुजर की सिफारिश नहीं है, खासकर जब आप एक बड़े अनुप्रयोग का निर्माण कर रहे के लिए इस विधि।

मैं "रेडक्स" जैसे जेएस के लिए कुछ राज्य प्रबंधक की सलाह देता हूं।