Hiding navbar function not working useLocation

user_15215008 0
Viewed 172

Can anyone tell me why this function is not giving me the desired results. Have I missed something obvious? When I console log

import React from 'react'
import Navbar from './Components/Navbar'
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Home from './Components/Home'
import Welcome from './Components/Welcome'
import About from './Components/About'
import Contact from './Components/Contact'


    function App() {
  return (
    <>
    <useLocation> 
      {({ useLocation }) => { 
        if (useLocation.pathname !== "/") { return <Navbar/>; } }
      } 
    </useLocation>
    <Router>
      <Route exact path="/" component={Welcome}/>
      <Route path="/Home" component={Home}/>
      <Route path="/About" component={About}/>
      <Route path='/Whitepaper' component={WhitePaper}/>
    </Router>
    </>
  );
}

export default App;
react-router-dom reactjs
1 Answers

I think you'll have better luck rendering the Navbar component into a route and checking the passed location from route props.

function App() {
  return (
    <Router>
      <Route
        render={({ location }) => location.pathname !== "/" ? <Navbar/> : null}
      />
      <Route exact path="/" component={Welcome}/>
      <Route path="/Home" component={Home}/>
      <Route path="/About" component={About}/>
      <Route path='/Whitepaper' component={WhitePaper}/>
    </Router>
  );
}
user_86908570
Related