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

Question

I am creating an application in react, I have a login page, and other pages that need the user to be logged in to access.

in my app.js

I have a whole structure that I created with components.

  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>
    );
  }
}

And I have the following route file

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>
)

When I access the login page, I don't want all of my Header, NavLeft, Container components to be loaded.

What is the best way to validate this?

I'm stuck in this situation, I can't think of how to get around this

Answer 1

Flip it around so that Routes is higher up the hierarchy, and the Header and navLeft components are a separate part of a Wrapper component.

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 />
</>

Then you want to put the Wrapper as the component prop on your Route, and then the home compnent should be a child of it, like:

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

Or:

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

It might also be easier if you refactor to get rid of the separate PrivateRouter, but have everything in one place, then re-jig things so that the header and navbar are how you like, and then you can see what you want to split out later.

Answer 2

So The easiest way is by Taking the Header, Container & NavLeft components from where it is now and moving it to inside PrivateRoute wrapping the component returned in isAuthenticated.

So that it shows up only in Private routes.