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

Question

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

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <BrowserRouter>
            <div>
              <Navbar />
              <Switch>
                <Route path='/' component={Landing} exact />
                <Route path='/login' component={Login} exact />
                <Route path='/registration' component={Registration} exact />
                <Route path='/authtest' component={AuthTest} exact />
                <Route path='/home' component={Home} exact />
                <Route path='/search' component={search} exact />
                <Route path='/profile' component={Visualize} exact />
                <Route path='/vault' component={Vault} exact />
              </Switch>
            </div>
          </BrowserRouter>
        </PersistGate>
      </Provider>
    );
  }
}

export default App;

Answer 1

你可以简单地使用三进制

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

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

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

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

How to show a different navbar in react router depending on the user authentication?

reactjs

react-navigation

react-router-dom