How to hide navbar in login page in react router

by

You could structure your Routes differently so that the Login component doesn’t have the Header Like

<BrowserRouter>
  <Switch>
  <div className="App">
    <Route exact path="/(login)" component={LoginContainer}/>
    <Route component={DefaultContainer}/>

  </div>
  </Switch>
</BrowserRouter>

const LoginContainer = () => (
  <div className="container">
    <Route exact path="https://stackoverflow.com/" render={() => <Redirect to="/login" />} />
    <Route path="/login" component={Login} />
  </div>
)


 const DefaultContainer = () => (
    <div>
    <Header toggleAlert={this.toggleAlert} />
    <div className="container">
      <Navbar />
      <Route path="/main" component={Main} />
      <Route path="/user" component={User} />
      <Route path="/hw-setting" component={Setting} />
      <Route path="/hw-detail/:id" component={HwDetail} />
      <Route path="/gas-detail/:id" component={GasDetail} />
      {this.state.isAlertOpen ? <Alert /> : null}
    </div>
    </div>
 )

More Related Contents:

  1. React-router URLs don’t work when refreshing or writing manually
  2. Programmatically Navigate using react-router
  3. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  4. How to render an array of objects in React?
  5. Pass props in Link react-router
  6. How to use Redirect in version 5 of react-router-dom of Reactjs
  7. react-router scroll to top on every transition
  8. React Router with optional path parameter
  9. Use anchors with react-router
  10. React Routing works in local machine but not Heroku
  11. React doesn’t reload component data on route param change or query change
  12. react-router getting this.props.location in child components
  13. Get path params in react-router v4
  14. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  15. Client Routing (using react-router) and Server-Side Routing
  16. Multiple Nested Routes in react-router-dom v4
  17. How do I reload a page with react-router?
  18. How to sync Redux state and url hash tag params
  19. onEnter not called in React-Router
  20. react-router go back a page how do you configure history?
  21. How to manually invoke Link in React-router?
  22. Detect change in query param react-router-dom v4.x and re-render component
  23. Material-ui adding Link component from react-router
  24. How to use normal anchor links with react-router
  25. React router global header
  26. React: ‘Redirect’ is not exported from ‘react-router-dom’
  27. React Router BrowserRouter leads to “404 Not Found – nginx ” error when going to subpage directly without through a home-page click
  28. On React Router, how to stay logged in state even page refresh?
  29. How can I redirect in React Router v6?
  30. ReactJS Bootstrap Navbar and Routing not working together

Leave a Comment