In React App.js how to conditionally render a component?

Question

function App() {
  return (
    <BrowserRouter>
      <UserProvider>
        <div className="App">
          <Navbar />
          <Hnavbar />
          <Routes>
            <Route path="/" element={<LandingPage />}></Route>
            <Route path="/analytics" element={<Analytics />}></Route>
            <Route path="/home" element={<Home />}></Route>
            <Route path="/signup" element={<SignUp />}></Route>
            <Route path="/signin" element={<SignIn />}></Route>
            <Route path="/nearby-hospitals" element={<Hospitals />}></Route>
            <Route path="/subscribe" element={<Subscribe />}></Route>
          </Routes>
          <ToastContainer theme="light" />
        </div>
      </UserProvider>
    </BrowserRouter>
  );
}

export default App;

This is my main App.js code of React. Now I want that in signup and signin pages, Navbar should not be visible. So to do that?

function App() {
  const location = useLocation();
  const isAuthPage = location.pathname === "/signin" || location.pathname === "/signup";

  return (
    <UserProvider>
      <BrowserRouter>
        <div className="App">
          {!isAuthPage && <Navbar />}
          <Hnavbar />
          <Routes>
            <Route path="/" element={<LandingPage />} />
            <Route path="/analytics" element={<Analytics />} />
            <Route path="/home" element={<Home />} />
            <Route path="/signup" element={<SignUp />} />
            <Route path="/signin" element={<SignIn />} />
            {/* Rest of the routes */}
            {/* ... */}
          </Routes>
          <ToastContainer theme="light" />
        </div>
      </BrowserRouter>
    </UserProvider>
  );
}

I tried this with the help of uselocation to get current url path but it gave me error history.ts:480 Uncaught Error: useLocation() may be used only in the context of a <Router> component.

You have to move that logic to a `Navbar` component or create a wrapper component for `Navbar` — Konrad, Jun 19 '23 at 08:50

i am davood · Answer 1 · 2023-06-19T12:35:01.747

you should use React-router-dom hooks just inside of Router provider acutely you are using the useLocation hook before the definition of the Router

you better use HOC to render them. something like this :

    const Layout = ({children})=>{
       const location = useLocation();
       const isAuthPage = location.pathname === "/signin" || location.pathname === "/signup";

       return(
             <>
               {!isAuthPage && <Navbar />}
               {children}
             </>
       )
    }

then wrap whole the pages with Layout

In React App.js how to conditionally render a component?

1 Answers1