Nav/Footer components wont mount | Next.js | Page 1

viral peak Mar 31, 2023, 8:25 PM

#

I cannot useEffect() in any of my components, other than my page components, and I am confused on why

ill add my code under

#

import React from 'react'
import Link from 'next/link'
import Image from 'next/image'

export default function Nav({ currentPath }) {
  const invisibleRoutes = ['/dashboard'];
  const isVisible = invisibleRoutes.includes(currentPath);

  return (
    <>
    {isVisible
     ? (
      <></>
     )
     : (
      <nav className="relative px-4 py-4 flex justify-between items-center">
        <div className="gap-2 flex">
          <Link className="font-secondary text-fuchsia-600 text-4xl" href="/">Midnight</Link>
          <Image src="/moon40px.png" alt="moon" width={40} height={40} />
        </div>
        <div className="lg:hidden">
          <button className="flex items-center p-3">

          </button>
        </div>
        <ul className="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
          <li><Link className="text-md hover:text-slate-900 transition" href="/">Home</Link></li>
          <li><Link className="text-md text-fuchsia-600 font-bold hover:text-cyan-600 transition" href="/about">About Us</Link></li>
          <li><Link className="text-md hover:text-slate-900 transition" href="/contact">Contact</Link></li>
          <li><Link className="text-md hover:text-slate-900 transition" href="/dashboard">Dashboard</Link></li>
        </ul>
        <div className="ml-auto">
          <Link href="/login" className="bg-neutral-900 hover:bg-neutral-800 p-3 rounded-md mr-2 transition">Login</Link>
          <Link href="/register" className="bg-neutral-900 hover:bg-neutral-800 p-3 rounded-md transition">Register</Link>
        </div>
      </nav>
   )
    }
    </>
  )
}
``` nav.jsx

#

import { FaDiscord } from "react-icons/fa";
import { FaGithub } from "react-icons/fa";
import Link from 'next/link'

export default function Footer({ currentPath }) {
  const invisibleRoutes = ['/dashboard'];
  const isVisible = invisibleRoutes.includes(currentPath);

  return (
    <>
      {isVisible
      ? (    
      <></>
      )
      : (
        <footer className="bottom-0 flex-shrink-0 font-primary left-0 px-4 border-gray-900 border-t-2 w-full p-5">
          <p className="inline font-primary mt-4 text-white text-lg uppercase ml-[4vw] md:ml-[10vw]">2023 &copy; All rights Reserved Midnight</p> 
          <Link className="px-2 hover:text-slate-900 mt-4 mx-auto text-white w-6" href="https://discord.gg/"><FaDiscord className="inline" /></Link>
          <Link className="px-2 hover:text-slate-900 mt-4 mx-auto text-white w-6" href="https://github.com/Midnight-Development/"><FaGithub className="inline" /></Link>
        </footer>
      )
    }
    </>
  );
}
``` footer.jsx

#

import { Html, Main, Head, NextScript } from "next/document";
import Footer from "./components/Footer";
import Nav from './components/Nav'

export default function Document(props) {
  const { __NEXT_DATA__ } = props;
  const { page } = __NEXT_DATA__;
  return (
    <Html lang="en" className="p-0 m-0 overflow-x-hidden">
      <Head>
        <meta name="description" content="Midnight" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <title>Midnight</title>
      <body className="bg-black text-white font-primary min-h-screen flex flex-col">
        <Nav currentPath={page} />
          <Main />
        <Footer currentPath={page} />
        <NextScript />
      </body>
    </Html>
  );
}
``` _document.js

#

import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}
``` _app.js

safe silo Mar 31, 2023, 9:01 PM

#

What error you get?

viral peak Mar 31, 2023, 9:13 PM

#

safe silo What error you get?

not an error

#

the component wont mount

#

useEffect() will not work

serene sable Mar 31, 2023, 9:32 PM

#

Hi, where do u want to implement useEffect? Which component?

viral peak Apr 1, 2023, 2:06 AM

#

serene sable Hi, where do u want to implement useEffect? Which component?

either the nav or the footer, neither will work

open phoenix Apr 1, 2023, 2:12 AM

#

Move nav and footer and any other layout into _app

#

app props has router which you can use for router.asPath or whatever, no need for the weird logic actually

viral peak Apr 1, 2023, 2:42 AM

#

open phoenix Move nav and footer and any other layout into _app

okkay ill do it later im doingsmt

viral peak Apr 1, 2023, 2:46 AM

#

open phoenix app props has `router` which you can use for `router.asPath` or whatever, no nee...

import Nav from './components/Nav'
import Footer from './components/Footer'

export default function App({ Component, pageProps }) {
  return (
    <>
      <div className="flex flex-col">
        <Nav  {...pageProps}/>
          <Component {...pageProps} />
        <Footer {...pageProps}/>
      </div>
    </>
  )
}
``` as such?

#

and then also the router.asPath

open phoenix Apr 1, 2023, 2:47 AM

#

No need to pass in pageProps to nav and footer

#

You also dont need the <> </> but it should work regardless

viral peak Apr 1, 2023, 2:48 AM

#

open phoenix No need to pass in pageProps to nav and footer

wdym how

open phoenix Apr 1, 2023, 2:49 AM

#

pageProps is only for Component really

#

You can console log it to see what the value is

viral peak Apr 1, 2023, 2:50 AM

#

open phoenix You can console log it to see what the value is

idk wym but i got rid of the props bc i dont need them but the component mounts now finally

open phoenix Apr 1, 2023, 2:51 AM

#

Coolio

#

I meant you could do console.log({ pageProps }) to see its value. When in doubt, log shrug

#

Now, you'll want to pass in router.asPath or else the navbar and footer dont know what the current page is

viral peak Apr 1, 2023, 2:53 AM

#

open phoenix I meant you could do `console.log({ pageProps })` to see its value. When in doub...

oh tbh im sorta new to next and react so i rlly dont know abt pageprops too much

#

but

#

also

#

i can get the router path thing inside my nav code now, no need anymore

#

thank you so much for the help aswell

#Nav/Footer components wont mount