Question

我正在建立一个反应应用程序，其中两个不同的用户组登录（通过Firebase）。

每个用户组需要获得不同的路由。不同的群组应该分享网址，但内容不同。

为此，我在路由js中添加了一个switch语句。

当我手动更改acctype时，代码就像预期的那样工作，但我需要更改我的firebaseclass中的acctype var，以便将合适的人路由到正确的路线......

问题是，在任何setter方法可以设置acctype变量之前，react会呈现视图。我已经尝试了回调和.done以及asnyc。

此routes.js将带有变量rut的组件直接导出到index.js中React.dom.render（）

感谢您的帮助！

import {Route, Router, IndexRedirect, browserHistory} from 'react-
router';
var acctype = 0;
var rut = "";
switch (acctype) {
case 0: //Group0
  rut = (
    <Router history={browserHistory}>

      <Route path="/" component={Blank}>
        <IndexRedirect to="/welcome"/>
        <Route path="welcome" component={Welcome_View}></Route>
        <Route path="login" component={Login_View}></Route>
        <Route path="*" component={fofView}></Route>
      </Route>

    </Router>
  );
  break;

case 1: //Group1
  rut = (
    <Router history={browserHistory}>
      <Route path="/" component={Main}>
        <IndexRedirect to="/uebersicht"/>
        <Route path="uebersicht" component={Uebersicht_KtppView}></Route>

        <Route path="wiki" component={Wiki_KtppView}></Route>
        <Route path="netzwerk" component={Netzwerk_KtppView}></Route>
        <Route path="meineEinrichtung" component={meineEinrichtung_KtppView}></Route>
        <Route path="feedback" component={Feedback_KtppView}></Route>

      </Route>
    </Router>
  );
  break;
case 2: //Group 2
  rut = (
    <Router history={browserHistory}>
      <Route path="/" component={Main}>
        <IndexRedirect to="/main"/>
        <Route path="main" component={MainView}></Route>
        <Route path="minor" component={MinorView}></Route>
      </Route>
    </Router>
  );
  break;
  }
  export default(rut)

Answer 1

我找到了解决这个问题的新想法

onEnter属性执行工作

在最后的tipp中描述了

https://scotch.io/tutorials/routing-react-apps-the-complete-guide

使用Switch语句进行Costomize React路由

1 个答案: