How can I hide Navbar from signin, signup pages in react?

Question

1. How can i modify my app.js file to hide Navbar for signin and signup pages, but render for other pages?

2. I want to render navbar once but screencomponents inside it should change. In navbar , I have to pass screenComponent prop in order to show content inside nav and sidebar. The code is working perfect but I don't know whether I wrote the code perfect? what is the standard way to do this task ?

   function App() { return ( <Navbar screenComponent={

        <Routes>
   
          {/* User Profiling Routes */}
   
          <Route path="/" element={<Signin />} />
          <Route path="signup" element={<Signup />} />
          <Route path="forgotpassword" element={<ForgotPassword />} />
          <Route path="emailsent" element={<EmailSent />} />
          <Route path="/profile" element={<PrivateRoute Component={ProfileHome} />} />
          <Route path="/wish" element={<PrivateRoute Component={Wishlist} />} />
          <Route path="/add_address" element={<PrivateRoute Component={AddAddress} />} />
          <Route path="/edit_address/:id" element={<PrivateRoute Component={EditAddress} />} />
          <Route path="/add_payment" element={<PrivateRoute Component={AddPayment} />} />
          <Route path="/edit_payment/:id" element={<PrivateRoute Component={EditPayment} />} />
          <Route path="/delete_account" element={<PrivateRoute Component={DeleteAccount} />} />
          <Route path="/edit_prescription" element={<PrivateRoute Component={EditPrescriptions} />} />
          <Route path="/prescription_details" element={<PrivateRoute Component={PrescriptionDetails} />} />
          <Route path="/add_prescription" element={<PrivateRoute Component={AddPrescription} />} />
          <Route path="/change_password" element={<PrivateRoute Component={ChangePassword} />} />
          <Route path="/upload_tryon_images" element={<PrivateRoute Component={UploadTryonImages} />} />
          <Route path="/upload_user_image" element={<PrivateRoute Component={UploadUserImage} />} />
          <Route path="/giftcards" element={<PrivateRoute Component={GiftCards} />} />
          <Route path="/my_details" element={<PrivateRoute Component={MyDetails} />} />
   
          {/* order management routes */}
   
          <Route path="/select_prescription_type" element={<PrivateRoute Component={SelectLensType} />} />
          <Route path="/select_prescription_Option" element={<PrivateRoute Component={SelectPrescriptionOption} />} />
          <Route path="/select_prescription_Type" element={<PrivateRoute Component={SelectPrescriptionType} />} />
          <Route path="/enter_prescription" element={<PrivateRoute Component={EnterPrescription} />} />
   
          {/* no page found */}
   
          <Route path="*" element={<NoPage />} />
   
        </Routes>
   
      } />
   
    </Router>
   

   ); }

   export default App;

Answer 1

To hide the Navbar for the signin and signup pages and render it for other pages, you can modify your App.js file as follows:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './Navbar';
import Signin from './Signin';
import Signup from './Signup';
import Home from './Home';
// Import other components...

function App() {
  return (
    <Router>
      <Routes>
        {/* Public Routes */}
        <Route path="/" element={<Signin />} />
        <Route path="/signup" element={<Signup />} />

        {/* Private Routes */}
        <Route
          path="/*"
          element={
            <div>
              <Navbar />
              <Routes>
                <Route path="/" element={<Home />} />
                {/* Add other private routes here */}
              </Routes>
            </div>
          }
        />
      </Routes>
    </Router>
  );
}

export default App;

In this code, we use the Router component from react-router-dom to handle routing. We define two types of routes: public routes (signin and signup) and private routes (all other routes). For the public routes, we directly render the corresponding components (<Signin /> and <Signup />).

For the private routes, we wrap them inside a div element that contains the Navbar component and the nested Routes component. This structure ensures that the Navbar is rendered only once, and the content inside it (the Routes component) changes based on the current route.

You can add additional private routes inside the nested Routes component as needed, replacing <Home /> with the appropriate components for each route.

Make sure to import the necessary components (Navbar, Signin, Signup, etc.) in your App.js file or adjust the import statements accordingly.

Note: This example assumes you are using the react-router-dom package for routing.

Answer 2

While Saunak's answer should suffice, It would be good to separate your content in a protected page and public page and render the navbar conditionally based on user's authenticated state.

interface ProtectedElementProps {
  element: React.ReactElement
}

export const ProtectedElement: React.FC<ProtectedElementProps> = ({ element }) => {
    const { isAuthenticated } = useAuth();

    // If the user is not authenticated, navigate to the login route
    if (!isAuthenticated) {
        return <Navigate to={routes.login} replace />;
    }

    // If the user is authenticated, render the provided `element` wrapper in your protected navigation
    
    return <Navbar state="private">element</Navbar>;
};

interface PublicElementProps {
  element: React.ReactElement
  strict?: boolean
}

export const PublicElement: React.FC<PublicElementProps> = ({
    element,
    strict = false // defaults to `false` if not provided
}) => {
    const location = useLocation();
    const { isAuthenticated } = useAuth();

    // If the user is authenticated and `strict` is `true`, navigate to a different route
    // What strict does is essentially prevents a logged in user from accessing the route
    if (isAuthenticated && strict) {
        return <Navigate to={location.state?.from.pathname ?? routes.dashboard} replace />;
    }

    // Otherwise, render the provided `element` in your public navigation
    return <Navbar state="public">element</Navbar>;
};