How to create a log in page w/o navbar and the landing page w/ navbar?

manpreet Best Answer 2 years ago

i dont want a navbar in my log in page

render() {
    return (
      <BrowserRouter>
        <div style={{position:'fixed', width: '100%'}}>  
        <NavBar />
          <Switch>
          <Route exact path="/LogIn" component={LogIn}  exact />
            <Route path="/Home" component={Home}  exact />
            <Route path="/dashboard" component={Dashboard}  exact />
            <Route path="/mapview" component={MapView}  exact />
            <Route path="/faq" component={FAQ}  exact />
          Switch>
        div>
      BrowserRouter>
  );
}

sample image

manpreet 2 years ago

If you do not require Navbar in Login, Signup pages, just move the component with Navbar out of the component that these routes are defined in. For example:

In main App component file:

render() {
    return (
      <BrowserRouter>
        <div style={{position:'fixed', width: '100%'}}>  
          <Route exact path="/LogIn" component={LogIn} />
          <Route path="/" component={Content} />
        div>
      BrowserRouter>
  );
}

In component Content file:

render() {
    return (
      <div>  
        <NavBar />
         <Switch>
            <Route path="/Home" component={Home}  exact />
            <Route path="/dashboard" component={Dashboard}  exact />
            <Route path="/mapview" component={MapView}  exact />
            <Route path="/faq" component={FAQ}  exact />
         Switch>
      div>
  );
}