CODEWITHSUNDEEP
reactjsreact-router
phemieny7
phemieny7

Reputation: 821

How can i hide some Navbar and Sidebar on some selected component

I have been unable to hide the sidebar and Navbar for some components which include login, signup, forget-password and reset-password confirm-verification

i have tried almost every everyone available to me using the stackoverflow, but none was able to work for me including [blog]:https://medium.com/@sandip21/how-to-hide-navbar-footer-on-authentication-pages-in-reactjs-40714ee1ce48, yet i couldn't get it to work

here is my app.js code

import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import {withRouter} from 'react-router-dom'
import Header from './component/layout/Header';
import Sidebar from './component/layout/Sidebar';
import Shipped from './component/pages/Shipped';
import Warehouse from './component/pages/Warehouse';
import Assisted from './component/pages/Assisted';
import Login from './component/auth/Login'
import Reset from './component/auth/Resetpass'
import ConfirmEmail from './component/auth/ConfirmEmail'
import Signup from './component/auth/Register'
import Profile from './component/pages/Profile';
import jwt_decode from 'jwt-decode';
import setAuthToken from './utils/setAuthToken';
import { Provider } from 'react-redux';
import PrivateRoute from './component/common/PrivateRoute';
import store from './store';

function App() {
  return (
<Provider store={store}>
    <Router>
      //this is the pages i want to hide the <Header/> and <Sidebar/> from
        <Route exact path="/" component ={Login}/>
        <Route exact path="/Signup" component ={Signup}/>
        <Route exact path="/Reset" component ={Reset}/>
      //this is where they ends
        <Header/>
        <Sidebar/>
        <div id= "main-wrapper">
          <Route path="/Shipped" component ={Shipped}/>
          <Route path="/Warehouse" component ={Warehouse}/>
          <Route path="/Assisted" component ={Assisted}/>
          <Route path="/Profile" component ={Profile}/>
      </div>
    </Router>
  </Provider>

  );
}

export default App;

Upvotes: 1

Views: 2835

Answers (2)

Neil
Neil

Reputation: 968

I think your making the code too overcomplicated, some steps I would introduce the following below.

Create a component called <Wrapper>, this should deal with the header responsibility. Just wrap this in every UI that you need it. You are building a variable which adds code duplication and could become a performance problem if you had 20 views which have no header..

<Wrapper />:

const Wrapper = ({ children }) => (
  <>
    <Head />

    {children}
  </>
);

On a side note, I think extracting data and jsx make for easier testing and if done correctly makes for easy code reviews!

This is what I would do with your routes:

routes.js:

// Import routes here...

const routes = [
  {
    path: "Login",
    component: Login
  },
  {
    path: "Reset",
    component: Reset
  },
  {
    path: "Confirm",
    component: Confirm
  },
  {
    path: "Signup",
    component: Signup
  },
  {
    path: "/Warehouse",
    component: Warehouse
  },
  {
    path: "/Assisted",
    component: Assisted
  },
  {
    path: "/Profile",
    component: Profile
  },
  {
    path: "/shipped",
    component: Shipped,
    exact: true
  }
];

The benefit here is that you divide and separate out concerns in the app it makes debugging easier to deduce. This main component only cares about rendering routes, it also means your <App /> has only app required import not a block of route component imports.

Now your <App /> can be nice and small for example:

const App = () => (
  <Provider {...{ store }}>
    <Router>
      <div id="main-wrapper">
        {routes.map(route => (
          <Route key={route.path} {...route} />
        ))}
      </div>
    </Router>
  </Provider>
);

I hope this helps, let me know how you get on!

Upvotes: 2

phemieny7
phemieny7

Reputation: 821

All i did was use a let statement to condition the header in the pages

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Head from './component/layout/Head';
import Shipped from './component/pages/Shipped';
import Warehouse from './component/pages/Warehouse';
import Assisted from './component/pages/Assisted';
import Login from './component/auth/Login'
import Profile from './component/pages/Profile';
import jwt_decode from 'jwt-decode';
import setAuthToken from './utils/setAuthToken';
import { Provider } from 'react-redux';
import PrivateRoute from './component/common/PrivateRoute';
import store from './store';

 class App extends Component {
   render(){
    let HideHeader = window.location.pathname === '/Login' && '/Reset' && '/Confirm' && '/Signup' ? null : <Head/>
        return (
            <Provider store={store}>
                <Router>
                  <div id= "main-wrapper">              
                        {HideHeader}
                        <Route path="/Login" component={Login} /> 
                        <Route path="/Warehouse" component ={Warehouse}/>
                        <Route path="/Assisted" component ={Assisted}/>
                        <Route path="/Profile" component ={Profile}/>
                        <Route exact path="/shipped" component={Shipped} />

                  </div>    
                </Router>
              </Provider>

        );
    }
 }

export default App;

Upvotes: 2

Related Questions