توجيه مخصص مع nextjs؟

عبد النور محمد · 15 أغسطس 2021

لدي مكون يتحقق من اسم المسار ويعمل عليه:

 const router = useRouter();
  const path = router.pathname;//props.location.pathname;

  const p = path.split('/').filter((s) => s !== "")
  let submissionId = p[0] == 's' && p[1]
  const submission = useQuery(SUBMISSION, {
    variables: {
      id: submissionId
    },
    skip: submissionId === false
  })

يعمل هذا بشكل جيد في تطبيق react ولكن nextjs يعيد التوجيه إلى 404. هل هناك طريقة لإعداد نمط لـ nextjs لتجاهل المسارات غير الموجودة والسماح لرمز المكون بمعالجته؟

محمد أبو عواد · 15 أغسطس 2021

يجب أن يكون لديك صفحة محددة في مجلد الصفحات إذا كنت لا تريد أن يقوم Next.js بإعادة التوجيه إلى 404, أنشئ ملف باسم dynamic.js في مجلد الصفحات ثم يمكنك استخدام الكود كالتالي

import React from 'react'
import { useRouter } from 'next/router'

const Dynamic = () => {
  const router = useRouter();
  const { dynamic } = router.query;

  return (
    <div>
      My dynamic page slug: {dynamic}
    </div>
  )
}

export default Dynamic

ويمكنك الارتباط بها على النحو التالي

<Link href="/[dynamic]" as="/dynamic-page-slug">
  <a>Link to my Dynamic Page</a>
</Link>

توجيه مخصص مع nextjs؟

السؤال

عبد النور محمد

1 جواب على هذا السؤال

Recommended Posts

محمد أبو عواد

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية