时间戳

首页 > 解决方案 > 当用户未登录 React 时隐藏 app.js 中的组件

reactjs - 当用户未登录 React 时隐藏 app.js 中的组件

问题描述

我正在创建一个反应应用程序，我有一个登录页面，以及其他需要用户登录才能访问的页面。

在我的 app.js

我有一个用组件创建的完整结构。

  render() {

    return (
      <BrowserRouter>

        <Header showNavLeft={this.state.showNavLeft} onClickBars={(value) => this.setState({ showNavLeft: value })} />
        <Container>
          <NavLeft showNavLeft={this.state.showNavLeft} />
          <Screen>
            <Routes />
          </Screen>
        </Container>


        <GlobalStyle />
      </BrowserRouter>
    );
  }
}

我有以下路线文件

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
      {...rest}
      render={props =>
        isAuthenticated() ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: "/", state: { from: props.location } }} />
        )
      }
    />
  );

const Routes = () => (

    <Switch>
        <Route path="/" exact component={Login} />
        <PrivateRoute path="/home" component={home} />
        <PrivateRoute path="/users" component={users} 
    </Switch>
)

当我访问登录页面时，我不希望加载我的所有 Header、NavLeft、Container 组件。

验证这一点的最佳方法是什么？

我被困在这种情况下，我想不出如何解决这个问题

标签： reactjs

解决方案

将其翻转以使Routes层次结构更高，并且Header和navLeft组件是组件的独立部分Wrapper。

const Wrapper = ({children} => (
<>
  <Header showNavLeft={this.state.showNavLeft} onClickBars={(value) => this.setState({ showNavLeft: value })} />
      <Container>
        <NavLeft showNavLeft={this.state.showNavLeft} />
          <Screen>
            {children}      
          </Screen>
      </Container>
<GlobalStyle />
</>

然后你想把 Wrapper 作为组件道具放在你的 Route 上，然后 home 组件应该是它的子组件，例如：

<Switch>
<Route exact path="/">
  <Login/>
</Route>
<Route path="/home" component={Wrapper}>
  <home/>
</Route>
<Route path="/user" component={Wrapper}>
  <Users />
</Route>
</Switch>

或者：

<Switch>
<Route exact path="/">
  <Login/>
</Route>
<Route path="/home" component={Wrapper}>
  <Wrapper>
    <home/>
  </Wrapper>
</Route>
<Route path="/user">
  <Wrapper>
    <Users />
  </Wrapper>
</Route>
</Switch>

如果您重构以摆脱单独的 PrivateRouter 也可能更容易，但将所有内容放在一个地方，然后重新调整内容以使标题和导航栏符合您的喜好，然后您可以看到要拆分的内容之后。

推荐阅读