header of landing page showing on different route

I made a new route and page see the route below

route Databaseroute { path: "/dashboard/productdatabase", to: DatabasePagee }
page DatabasePagee {
  component: import { DatabasePagee } from "@src/mainpages/DataBasePage"
}

route Databaseroute { path: "/dashboard/productdatabase", to: DatabasePagee }
page DatabasePagee {
  component: import { DatabasePagee } from "@src/mainpages/DataBasePage"
}

Now when i go to this route the page is ofcourse shown but also still the header/ top bar of the landing page is shown over it. How can i fix this? I use the SaaS [3] template

11 Replies

kapa.ai•3mo ago

Hi @Sven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing might be due to the way your components are structured. In the OpenSaaS template, the landing page has its own navbar component, which might be causing the issue you're seeing. To fix this, you might want to consider extracting the header part from the LandingPage.tsx to a new component and then conditionally rendering it based on the current route. You can use the useRouteMatch hook from react-router-dom to check if the current route matches the landing page route, and if it does, render the header. Here's an example of how you can do this:

import { useRouteMatch } from 'react-router-dom';

function App() {
  let match = useRouteMatch("/");

  return (
    <div>
      {match && <Header />}
      <Switch>
        <Route path="/dashboard/productdatabase">
          <DatabasePagee />
        </Route>
        {/* other routes */}
      </Switch>
    </div>
  );
}

import { useRouteMatch } from 'react-router-dom';

function App() {
  let match = useRouteMatch("/");

  return (
    <div>
      {match && <Header />}
      <Switch>
        <Route path="/dashboard/productdatabase">
          <DatabasePagee />
        </Route>
        {/* other routes */}
      </Switch>
    </div>
  );
}

In this example, the Header component will only be rendered when the current route is the landing page ("/"). For more information, you can check out these discussions on the Wasp Discord server: Navbar question (https://discord.com/channels/686873244791210014/1215258301780987904) and Frontend React Template integration into OpenSaas template (https://discord.com/channels/686873244791210014/1204153431019753512). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

SvenOP•3mo ago

@kapa.ai

export default function LandingPage() {
  return (
    <div className='bg-white dark:text-white dark:bg-boxdark-2'>
      <Header navigation={navigation} />

      <main className='isolate dark:bg-boxdark-2'>
        <Hero />
        <Clients />
        <Features features={features} />
        <Testimonials testimonials={testimonials} />
        <FAQ faqs={faqs} />
      </main>

      <Footer footerNavigation={footerNavigation} />
    </div>
  );
}

export default function LandingPage() {
  return (
    <div className='bg-white dark:text-white dark:bg-boxdark-2'>
      <Header navigation={navigation} />

      <main className='isolate dark:bg-boxdark-2'>
        <Hero />
        <Clients />
        <Features features={features} />
        <Testimonials testimonials={testimonials} />
        <FAQ faqs={faqs} />
      </main>

      <Footer footerNavigation={footerNavigation} />
    </div>
  );
}

THis is the landing-page, bt why does this navbar show on a different page that i put on another route?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The issue you're experiencing might be due to the way your application is structured. If you're using a layout component that includes the Header component, it will be displayed on all pages that use this layout. In the Wasp framework, the layout is a component that wraps around the page components and is used to define a common structure across multiple pages, such as headers, footers, or sidebars. If the Header component is included in the layout, it will appear on all pages that use this layout. If you want the header to only appear on the landing page, you can remove the Header component from the layout and include it directly in the LandingPage component, like you've done in the code snippet you provided. If you're still seeing the header on other pages, it might be because those pages are also including the Header component, or they're using a different layout that includes the Header. You should check the other pages and their layouts to make sure they're not including the Header. If you need more help with this, you can refer to the Wasp documentation (https://wasp-lang.dev/docs) or ask for help on the Wasp Discord server (https://discord.com/channels/686873244791210014/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

SvenOP•3mo ago

so @kapa.ai this is for example the page that is shown on the route (where also the navigatoin is unwillingly shown). how can i fix the issue. see attatched file

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry, but as an AI, I'm unable to view or access files. However, I can still provide some guidance. If you're seeing the navigation bar on a page where you don't want it to appear, it's likely because the navigation bar is part of a layout that's being used by that page. Here's what you can do to fix this: 1. Check the layout being used by the page. If the layout includes the navigation bar, that's why it's appearing on the page. 2. If you don't want the navigation bar to appear on this page, you can create a new layout without the navigation bar and use that layout for this page. Here's an example of how you can create a new layout:

// NewLayout.js
import React from 'react';

export default function NewLayout({ children }) {
  return (
    <div>
      {/* No navigation bar here */}
      {children}
    </div>
  );
}

// NewLayout.js
import React from 'react';

export default function NewLayout({ children }) {
  return (
    <div>
      {/* No navigation bar here */}
      {children}
    </div>
  );
}

Then, you can use this layout in your page:

// YourPage.js
import React from 'react';
import NewLayout from './NewLayout';

export default function YourPage() {
  return (
    <NewLayout>
      {/* Your page content here */}
    </NewLayout>
  );
}

// YourPage.js
import React from 'react';
import NewLayout from './NewLayout';

export default function YourPage() {
  return (
    <NewLayout>
      {/* Your page content here */}
    </NewLayout>
  );
}

In this example, YourPage will use NewLayout, which doesn't include the navigation bar. Remember to adjust the import paths according to your project structure. If you need more help with this, you can refer to the Wasp documentation (https://wasp-lang.dev/docs) or ask for help on the Wasp Discord server (https://discord.com/channels/686873244791210014/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

SvenOP•3mo ago

@kapa.ai that is exaclty what i did, but still this navbar is shown on everypage

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that you're still experiencing this issue. It's difficult to diagnose the problem without seeing your entire codebase, but here are a few more things you can check: 1. Make sure that the Header component is not being included anywhere else in your code. It's possible that it's being imported and used in another component that's being rendered on the page. 2. Check if there's any global state or context that's causing the Header to be displayed. For example, if you're using a context provider to manage the state of your navigation bar, it could be causing the Header to be displayed on all pages. 3. If you're using any kind of routing library like react-router-dom, make sure that the Header component is not included in the same Switch or Router component as your routes. This could cause the Header to be displayed on all pages. If none of these suggestions help, I would recommend reaching out to the Wasp community on their Discord server (https://discord.com/channels/686873244791210014/). They might be able to provide more specific help based on your exact code and setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

SvenOP•3mo ago

@Wasp Team doesn anyone know why the navigatoin bar is shown on everypage? wait i think i got it nvm

Vinny (@Wasp)•3mo ago

You will find the client wrapper and styling in the app/src/client/App.tsx file you'll want to modify this bit of code if you don't want to show the NavBar on your new page:

  const shouldDisplayAppNavBar = useMemo(() => {
    return location.pathname !== '/' && location.pathname !== '/login' && location.pathname !== '/signup';
  }, [location]);

  const shouldDisplayAppNavBar = useMemo(() => {
    return location.pathname !== '/' && location.pathname !== '/login' && location.pathname !== '/signup';
  }, [location]);

SvenOP•3mo ago

Solved! Indeed update the App.tsx file to modify when to show or not show the navbar

Vinny (@Wasp)•3mo ago

awesome. glad i could help

Gaming

Programming

header of landing page showing on different route