当前位置:  开发笔记 > 编程语言 > 正文

如何使用react-router将顶级组件状态传递给路由?

如何解决《如何使用react-router将顶级组件状态传递给路由?》经验,为你挑选了0个好方法。

我已经使用react-routerFirebase 进行身份验证设置了一个React应用.

我有这个工作,但我现在希望能够从主App组件管理登录用户(auth)的状态,并将其传递给子组件,而不必查询每个组件中的身份验证状态.

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 : (Register);
    var accountButton = (this.state.loggedIn) ? (My Account) : null;

    return (
    
{this.props.children}
); } }) 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 = ( ) ReactDOM.render(routes, document.querySelector('#main'));

我现在陷入困境,因为我无法找到一种方法stateApp组件的loggedIn 作为属性传递给子组件.

这有可能react-router吗?

推荐阅读
手机用户2402852307
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有