Question 252448 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why does router.query is not working when used within app/ with page.js, but work when move to pages/ with index.js

router.query is null, when i tried to use it inside my app directory when i moved to new pages directory outside the app, it works but the file name should be change to index.js, that means the nextui component was unable to use outside the app directory…

//app/stores/[id]/page.js 

'use client'
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { db } from '../../../firebase';
import { doc, getDoc } from 'firebase/firestore';

function StoreDetailPage() {
  const [store, setStore] = useState(null);
  const router = useRouter();
  const { id } = router.query || {};

  useEffect(() => {
    const fetchData = async () => {
      try {
        if (!id) return;

        const storeDocRef = doc(db, 'users', id);
        const storeDoc = await getDoc(storeDocRef);
          
        if (storeDoc.exists()) {
          setStore(storeDoc.data());
        } else {
          console.error("No such store!");
        }
      } catch (err) {
        console.error("Error getting document: ", err);
      }
    };
    
    fetchData();
  }, [id]); // Run the effect when id changes

  if (!store) return <div>Loading...</div>;

  return (
    <div>
      <h1>{store.name}</h1>
      <p>Contact: {store.phoneNumber}</p>
      {/* Display other store details here... */}
    </div>
  );
}

export default StoreDetailPage;

when i tried to use searchParams, the id is also ‘null’

'use client'
import React, { useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { db } from '../../../firebase';
import { doc, getDoc } from 'firebase/firestore';

function StoreDetailPage() {
  const [store, setStore] = useState(null);
  const searchParams = useSearchParams();
  const id = searchParams.get('id');

  useEffect(() => {
    const fetchData = async () => {
      try {
        console.log('id:', id);
        if (id) {
          const storeDocRef = doc(db, 'stores', id);
          const storeDoc = await getDoc(storeDocRef);

          if (storeDoc.exists()) {
            setStore(storeDoc.data());
          } else {
            // Display an error message to the user.
            alert('No store ID provided.');
          }
        } else {
          // Handle the case where the id variable is null.
        }
      } catch (err) {
        console.error("Error getting document: ", err);
      }
    };

    fetchData();
  }, [id]);

when i moved to pages/[id]/index.js , the id is defined, but if i use page.js, the NextUi component is working but the content is 404… Sorry I’m newbie please let me know what i can do to solve this problem.

//_app.js
import { NextUIProvider } from '@nextui-org/react';

function MyApp({ Component, pageProps }) {
  return (
    <NextUIProvider>
      <Component {...pageProps} />
    </NextUIProvider>
  );
}

export default MyApp;

//layout.js 
import './globals.css';
import { Inter } from 'next/font/google';
import { Providers } from '../pages/providers';
import NavbarSelector from '../components/NavbarSelector'; // Import NavbarSelector

const inter = Inter({ subsets: ['latin'] });

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>
          <NavbarSelector /> {/* Use NavbarSelector */}
          {children}
        </Providers>
      </body>
    </html>
  );
}

//provider.js 

"use client"
// app/providers.js
import React from 'react';
import { NextUIProvider } from '@nextui-org/react';

export function Providers({ children }) {
  return (
    <NextUIProvider>
      {children}
    </NextUIProvider>
  );
}


//

package.json

my directory looks like this:

app

  • store / [id] / page.js
  • layout.js
  • provides.js
  • _app.js

pages

  • shop / [id] / index.js (page.js only showing NextUI components but the content is 404)

I just want to keep using NextUI in my Nextjs Project, on both app and pages directory. the problem i faced now is the query id from my URL is not working (router.query // useSearchParams) in my app/ directory with page.js name. But it works on pages directory with ‘index.js’ file name.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have figured it out and edited my code and it is working now! thank you so much again!

    //Here is my updated code
// app/stores/[id]/page.js : 

'use client'
import React, { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import { db } from '../../../firebase';
import { doc, getDoc } from 'firebase/firestore';

function StoreDetailPage() {
  const [store, setStore] = useState(null);
  const params = useParams();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const id = params.id;
        if (id) {
          const storeDocRef = doc(db, 'users', id);
          const storeDoc = await getDoc(storeDocRef);

          if (storeDoc.exists()) {
            setStore(storeDoc.data());
          }
        }
      } catch (err) {
        console.error("Error getting document: ", err);
      }
    };

    fetchData();
  }, [params.id]);

  2. 0

    Within the app router, your page.js component gets passed a params object when it’s in a dynamic segment. And this params would contain your dynamic route id, like so:

    // app/stores/[id]/page.js 

export default function StoreDetailPage({ params }) {
  const { id } = params;

  return <div>{id}</div>;
}

    And you can use the useParams hook in client components:

    // app/SomeClientComponent.js

'use client';

import { useParams } from 'next/navigation';

export default function SomeClientComponent() {
  const { id } = useParams();

  return <div>{id}</div>;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search