如何根据用户身份验证在反应路由器中显示不同的导航栏?

时间:2021-05-04 17:13:19

标签: reactjs react-navigation react-router-dom

我需要根据用户身份验证呈现不同的导航栏。有一个全局导航栏,但对于下面的 Vault 组件,我想渲染一个不同的导航栏。假设用户已通过身份验证,我如何实现不同的导航栏?

Container(
                width: 300,
                child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  controller: _bcontroller,
                  child: Column(
                    children: [
                      Container(
                        width: 300,
                        child: Row(
                          children: [
                            Text(
                              '${eventList.length > 0 ? i['ShipName'] : ''}',
                            
                            ),
                          ],
                        ),
                      ),
                      Container(
                        width: 300,
                        child: Row(
                          children: [
                            Text(
                              '${eventList.length > 0 ? i[getEventDesc()].toString() : ''}',
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                    ],
                  ),
                ),
              )

1 个答案:

答案 0 :(得分:1)

你可以简单地使用三元来做到这一点

const[isLogin,setIsLogin]=useState(true);

 <Switch>
  {isLogin?<Route path="/" >
    <Header1/>
    </Route>
    : 
    <Route path="/" >
    <Header2/>
    </Route>}
  </Switch>

isLogin 是一种状态,如果用户登录渲染 Header1 & 如果用户未登录渲染 Header2,它将跟踪用户是否登录