یونس ماهری
12 ماه پیش توسط یونس ماهری مطرح شد
3 پاسخ

گرفتن query از روتر در next.navigation

سلام
توی ورژن قدیمی که از پیج دایرکتوری استفاده میکردم به راحتی از این طریق به کوئری دسترسی داشتم :

import {useRouter} from 'next/router'
const router = useRouter();
console.log(router.query) //?add-product

اما الان دارم از اپ دایرکتوری استفاده میکنم و از هوک های خود next هم استفاده میکنم ولی خود کوئری رو برنمیگردونه

چه جوری توی ورژن جدید همون خروجی قبل رو بگیرم؟


ثبت پرسش جدید
محمد رضا
تخصص : Full Stack Developer
@salar.mohammad2013 12 ماه پیش آپدیت شد
0

سلام
فکر میکنم کد زیر مد نظرتون هست
برای مسیر روتی که رفتید کد زیر

import { usePathname } from "next/navigation";
  const pathname = usePathname();

برای کوئری سرچ هاتون کد زیر

import { useSearchParams} from "next/navigation";
const searchParams = useSearchParams();
 const params = new URLSearchParams(searchParams)

یونس ماهری
تخصص : وبسایت
@yones.maheri 12 ماه پیش مطرح شد
0

usePathName فقط مسیر روت رو نشون میده و کوئری رو نشون نمیده، مثلا توی روت test :

'use client'

import { usePathname, useRouter, useSearchParams } from "next/navigation"

const Test = () => {
  const router = useRouter()
  const pathName = usePathname()

  function handleClick() {
    router.push('/test?url-query')
    console.log(pathName) // test
  }
  return (
    <div className="h-full w-full flex justify-center items-center">
      <button
        onClick={handleClick}
      >Click for Query
      </button>
    </div>
  )
}

با کلیک روی دکمه اون کوئری اضافه بشه
من چه جوری میتونم خود اون کوئری رو بگیرم

قبلا با router.query این مقدار برمیگشت
@salar.mohammad2013


محمد رضا
تخصص : Full Stack Developer
@salar.mohammad2013 12 ماه پیش مطرح شد
0

همون کد دومی که فرستادم بود ولی به صورت key ,value بود
طبق مستندات خود نکس به شکل زیر شما میتونی کوئری رو بگیری

import { useSearchParams } from "next/navigation";
  const searchParams = useSearchParams()
  const search = searchParams.get('search')
  console.log(search)

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام