Search
 
SCRIPT & CODE EXAMPLE
 

JAVASCRIPT

hide navbar and footer on certain pages like dashboard. react-router

//you can do it by having a state that only when the state is true the nav and footer will render:

function App() {

  const [showNav, setShowNav- = useState(true);

  return (
    <Router>
   {   showNav &&
          <nav>
            <Navbar />
          </nav>
   } 
      <Routes>
        <Route index element={<Home />} />
        <Route path="/Dashboard" element={<Dashboard />} />
        <Route path="/Login" element={<Login />} />
        <Route path="/Price" element={<Price />} />
        <Route path="/Profile/:username" element={<Profile />} />

        <Route path="/*" element={<ErrorPage />} />
      </Routes>

    {showNav &&
          <footer>
            <Footer />
          </footer>
        </Router>

    }
  );
}
//And for example, if you don't want to show the nav in the homepage you will pass the setShowNav function as a prop and will set it to false:

<Route index element={<Home funcNav={setShowNav}/>} />
//in home page:

props.funcNav(false);
Comment

PREVIOUS NEXT
Code Example
Javascript :: how to create your own event emitter in javascript 
Javascript :: dependent drop down list in jquery 
Javascript :: Ant Media Filter Plugin for Text 
Javascript :: How to pass variables from one page to another with AngularJS 
Javascript :: Why is the return function in my debounce function never called? Angularjs 
Javascript :: trying to minimalize the js code and want to increase the performance speed in js 
Javascript :: angularjs promise .then() to run sequentially inside a for loop 
Javascript :: angularjs Split date and time from api response 
Javascript :: angularjs How to sort a specific value in a map 
Javascript :: Calling $http.post in batches and chaining promises 
Javascript :: Angular Nx Nrwl - Cannot parse tsconfig.base.json: PropertyNameExpected in JSON when try to create a new lib 
Javascript :: Edit parameter in variable with increment/decrement box and save it 
Javascript :: react-native installation error with npx react-native 
Javascript :: adding to an array in js 
Javascript :: sort lowest to highest js 
Javascript :: How to access a preexisting collection with Mongoose 
Javascript :: get copied text javascript 
Javascript :: react text editor snippet 
Javascript :: bcrypt npm 
Javascript :: javasrccipt loop array 
Javascript :: get longi and long with an adress react 
Javascript :: how to get content disposition from header jquery 
Javascript :: javascript download save files in folder 
Javascript :: communicate between content script and bg 
Javascript :: prisma count non-null 
Javascript :: how to get mempool transactions and decode with ethers js 
Javascript :: https://javascript.plainenglish.io/javascript-algorithms-valid-parentheses-leetcode-71c5b2f61077 
Javascript :: button style when clicked and unclicked react material 
Javascript :: Javascript set control state none opposite 
Javascript :: adding javascript object within array in the middle position 
ADD CONTENT
Topic
Content
Source link
Name
9+7 =