Next.js: مسار مخصص `post /` id` يومض 404 قبل عرض الصفحة أخيرًا.

نفس العدد +1

كيف يتم تحويل مكون الارتباط إلى عنوان url هذا؟ هل تستخدم <Link href="/post/1"> أو <Link href="/post?id=1" as="/post/1"> ؟

حاليًا ، أستخدم <Link prefetch href={ /blog/${x.id} } /> . لقد جربت <Link prefetch href={ /blog/${x.id} } as={ /blog/${x.id} } /> في الماضي وقمت بتوصيله مرة أخرى. لا تزال تواجه نفس المشكلة.

لا يجب أن تكون الدعائم href و as هي نفسها ، href هي عنوان url الحقيقي ، إذا كان لديك pages/blog.js واستلمت المعرّف كاستعلام ثم href يجب أن يكون /blog?id=${x.id} و as هو عنوان url المخصص الخاص بك في هذه الحالة /blog/${x.id} .

sergiodxa لقد وضعت للتو هذا الرمز في مكانه.

<Link href={`/blog?id=${x.id}`} as={`blog/${x.id}`}>
    <a>Read Post</a>
 </Link>

يتم الآن إعادة عرض صفحة /blog عند كل نقرة أثناء إضافة id إلى عنوان URL.

tgrecojs آمل أن يساعدك مقتطف الشفرة هذا

    const href = `/journal?home=${this.state.article.path[0]}&articlePath=${this.state.article.path[1]}&file=${this.state.article.path[2]}`
    const as = `/journal/${this.state.article.path[0]}/${this.state.article.path[1]}/${this.state.article.path[2]}`

سيتم عرضه كـ https://www.someURL.com/journal/articlePath/morePath/evenMorePath

أنا أفهم كيف عمل المسار ugiacoman هذه ليست 404 غريب.

tgrecojs لقد قمت بعمل مثال الريبو https://github.com/sergiodxa/next-custom-query (تم النشر: https://next-custom-query.now.sh/blog) ، حيث يمكنك معرفة كيفية استخدام عناوين url المخصصة بدون إعادة التحميل و 404 باستخدام المكون next/link كما هو موضح أعلاه.

sergiodxa أقدر ذلك! لقد قمت بسحبها للتو وأضفت بعض الاستدعاءات غير المتزامنة إلى واجهة برمجة تطبيقات google blogger وهو ما أعمل عليه حاليًا. أدناه ، يمكنك معرفة كيفية تنقله إلى المسار ولكن لا يتم تحميل البيانات بشكل صحيح.

إزالة gif

الآن هذه المشكلة هي استنساخ مختلف قليلاً لهذه المشكلة عما هو مبين في تعليقي الأول. عندما واجهت هذه المشكلة لأول مرة ، اعتقدت أن السبب هو أنني كنت أستخدم redux وأن حالة التطبيق لم تكن تحمل صفحات post/id . قادني هذا إلى دمج استدعاء API جديد لكل منشور ، تمامًا كما دمجت في التطبيق الذي قمت بإنشائه ، ولكن ما زلت أجد أن لدي نفس المشكلة.

لقد كنت أواجه بعض المشاكل في إنشاء الريبو الخاص بك 😬 حتى تتمكن من العثور على الكود الخاص بي هنا -> https://github.com/tgrecojs/next-custom-query-async . اسمحوا لي أن أعرف أنك الأفكار! 😄

يبدو أنك تحصل على 400 ، عندما تفرغ من مشروعك أتلقى نفس الخطأ برسالة خطأ UsageLimits. ربما هذا هو سبب حصولك على هذا الخطأ.

نعم. سأحقق غدًا أكثر قليلاً ولكني أريد أن أشير إلى أن الفيديو الذي نشرته عند فتح المشكلة لا يقدم طلب واجهة برمجة تطبيقات على المسار /blog/:id . بدلاً من ذلك ، يتم تصفية المنشورات من متجر redux الخاص بي والذي تم تجميعه عند انتقال المسار /blog بحيث لا يمكن أن يكون هذا هو السبب في وصولي إلى هذه المشكلة. لقد قمت فقط بتنفيذ استدعاء API الثاني (الذي تم إجراؤه داخل blog/:id ) حيث اعتقدت أن له علاقة بمتجر redux الخاص بي ولكني وجدت نفسي أتلقى نفس الخطأ ولكن هذا ليس التنفيذ الحالي في الكود الخاص بي.

بمجرد أن أدركت أنه ألقى نفس الخطأ ، عدت مرة أخرى إلى استخدام استدعاء API واحد فقط (داخل /blog ) ثم تصفية منشور المدونة الضروري حسب المعرف.

sergiodxa يمكنني أن أؤكد أنها ليست حدود الاستخدام. ستلاحظ أن id لا يتم تمريره دائمًا بشكل صحيح إلى المسار /blog/:id ... لقد أرفقت الخطأ 400 الذي أتلقاه. ستلاحظ أن id غير محدد و (في هذه الحالة) يبدو أن هذا هو سبب ظهور الخطأ.

لقد قمت بتضمين مقطع فيديو آخر أدناه. أي أفكار لماذا قد تتصرف بهذه الطريقة؟ لم أقم بتغيير علامات <Link /> داخل هذا المستودع ومع ذلك ما زلت أواجه المشكلة 😬.

مرة أخرى ، أود أن أشير إلى أن الفيديو أعلاه يظهر لي إعادة إنتاج الخطأ داخل مثال الريبو الذي قمت بإنشائه - https://github.com/sergiodxa/next-custom-query .

أحصل أيضًا على 404 وميض بدون أي مسارات مخصصة. مجرد ملف يسمى orders.js في pages/ مع هذا الرمز:

import { Component } from 'react';

class Orders extends Component {
  render() {
    return (
      <div>
        <h2>My Orders</h2>
      </div>
    )
  }
}

export default Orders;

تبدو كقضية حرجة جدًا 😅

حاولت تكرارها ، لأن الشرطة المائلة اللاحقة في نهاية عنوان URL ، إذا انتقلت إلى /orders فلن ترى 404 ولكن إذا انتقلت إلى /orders/ فسترى ذلك 404 يومض قبل المحتوى ، يحدث هذا إما في وضع التطوير والإنتاج.

آه هذه مشكلة معروفة. https://github.com/zeit/next.js/issues/1189

لم تظهر مشكلتي بسبب وجود شرطة مائلة ، لذا يجب أن يكون هناك شيء آخر ، أليس كذلك؟

لقد أجريت بعض التغييرات في الكود الخاص بي وقمت بنشر نسختين مختلفتين ، أحدهما يستخدم prefetch والآخر لا يستخدم. أريد أن أشير إلى أنه لا يمكن لأي تطبيق الآن تحميل مسار post/:id بنجاح.

مع الجلب المسبق - https://tgrecojs-hltqztsjpx.now.sh/

لاحظ أحدهم أنه عندما أستخدم prefetch في الرابط ، فإنه يرمي الآن Page Does Not Exist Error عند عرض الروابط لكل منشور في المدونة. يمكنك رؤية لقطة شاشة لوحدة التحكم الخاصة بي أدناه.

بدون الجلب المسبق- https://tgrecojs-qzpspdjrin.now.sh/

عندما لا أستخدم الجلب المسبق ، فإن الخطأ الموضح أعلاه لم يعد موجودًا ولكنه لا يعرض التطبيق. عندما نشرت هذه المشكلة في البداية ، كان المكون الخاص بي يقوم بتهيئة مدونتي لكل مكون post/:id . لقد قمت منذ ذلك الحين بإزالة ذلك منذ الآن لا يتم عرض المشاركات الفردية أبدًا.

يُرجى إعلامي إذا كان بإمكاني تقديم المزيد من المعلومات التي يمكن أن تساعد في تشخيص هذه المشكلة. 🤔

tgrecojs لدي نفس المشكلة تقريبًا. prefetch لم يحل مشكلتي.

السلوك الذي أحصل عليه هو ما يلي:

• ينقر المستخدم على الرابط
• يظهر خطأ 404
• يتم إعادة تحميل الصفحة (؟؟)
• بعد إعادة التحميل ، يتم عرض الصفحة الصحيحة

آمل أن يساعد هذا في تصحيح المشكلة!

معلومات إضافية: Node v6.10.3 ، Chrome Version 60.0.3112.90

تحرير: نشر التطبيق حتى يتسنى لكم يا رفاق اختباره https://datahub.now.sh/ ، إنه الرابط / @ [اسم المستخدم] الذي لديه هذا السلوك

@ Theo- قيمة href في الرابط التالي / user?id=1 ، هل يمكنك تجربة /user?id=1 بدلاً من ذلك؟ أعتقد أن سبب 404 هو أن Next.js يحاول الوصول إلى /current/path/user?id=1 بدلاً من /user?id=1 ، ولكن عند إعادة تحميل الصفحة ، يعمل بشكل جيد بسبب عرض الخادم.

sergiodxa الذي فعل ذلك. شكرا لك!

tgrecojs كان لدي نفس سلوك 404 الوامض. في حالتي ، كان لدي رابط مع متغير بيئة لا يعمل على العميل ، وبالتالي فإن 404 ولكنه يعمل على الخادم. تم حلها باستخدام https://medium.com/the-tech-bench/next-js-environment-variables-d2f6ea1a1dca.

andreaskeller هممم طيب

نعم ، لقد حصلت بالفعل على متغيراتي تعمل بشكل جيد. أقوم بعرض أن مساري /blog باستخدام HOC يحصل على BLOGGER_API_KEY لذا فهو يعمل في هذه الأمثلة .... لا تستخدم صفحاتي الفرعية في /post/:id s أيًا منها المتغيرات.

سأقوم ببعض الحفر ، آمل أن أتمكن من الوصول إلى الجزء السفلي منه!

يبدو أن معظم المشكلات هنا تم إصلاحها. سأعمل على هذه المشكلة أيضًا https://github.com/zeit/next.js/issues/1189

أنا أغلق هذا الآن. لكن إذا احتجنا إلى القيام بشيء ما في الجوهر ، فأخبرني بذلك.

sergiodxa وفقًا مشكلتي . اسمحوا لي أن أعرف إذا كان لديك أي أسئلة حول هذا الموضوع! سأكون أكثر من سعيد لملء لكم كل ما يجري مع ذلك! 😄

• فرع Next-blog 404-Err

انها ليست ثابتة.

لدي نفس المشكلة ولكن بدون أي طرق مخصصة. لدي /pages/pipeline.tsx و / pipeline url يعمل بشكل جيد أثناء / pipeline / flashes 404 ثم أحاول تحميل صفحتي دون استدعاء "getInitialProps" (حيث كان 404 على الخادم!).

@ ex3ndr لست متأكدًا مما إذا كان هذا سيؤدي إلى حل المشكلة ، لكن لدي مشكلة مماثلة وقد عالجها هذا.
https://github.com/zeit/next.js#disopped- ملف-نظام-التوجيه

الاحتمالات التالية هي محاولة سحب نظام الملفات قبل الوصول إلى مسارك المخصص.

moaxaca لقد قمت بحل نفس الطريقة منذ أن كنت بحاجة إلى أن يكون لدي توجيه مخصص خاص بي - لقد قمت للتو بتعطيل التالي تمامًا.

أرى هذه المشكلة أيضًا. لم ينجح حل moaxaca بالنسبة لي. ما تم فعله هو استخدام أي مكون Link ، ولكن بدلاً من ذلك ، اختر استخدام طريقة pushRoute للمسارات التالية.

مثال أساسي:

import { connect } from 'react-redux'
import { Router } from '../routes'

// ----

export default class Link extends React.Component {

  handleClick(evt, url) {
    evt.preventDefault()    
    Router.pushRoute(url)
  }

  render() {
    const { url, title } = this.props

    return (
      <a href={ url} onClick={ (evt) => this.handleClick(evt, url) }>{title}</a>
    )
  }

}

يبدو أن هذا اكتشف الأمر ولا أرى خطأ وميض. لكنها تبدو سريعة بعض الشيء.

حفظ القضية

حصلت على نفس المشكلة من قبل وتمكنت من حلها. أنا أستخدم إعداد خادم سريع. اكتشفت أن سبب وميض صفحة 404 قبل التحميل إلى الصفحة الصحيحة هو أن الرابط الثابت لصفحتي لا يتطابق مع اسم المكون الخاص بي.

عندما يكون لدي هذا الرمز يومض 404:

server.get('/search', (req, res) => {
    const actualPage = '/search_results'
    const queryParams = { filters: req.query }
    app.render(req, res, actualPage, queryParams)
  })

لاحظ أن قيمتي /search و actualPage تختلفان.

تختفي الومضات 404 عندما أعيد تسمية المكون الخاص بي وتكون قيم actualPage مماثلة لقيم الصفحة الثابتة وهي search . انظر رمز العمل أدناه:

server.get('/search', (req, res) => {
    const actualPage = '/search'
    const queryParams = { filters: req.query }
    app.render(req, res, actualPage, queryParams)
  })

الآن كلاهما يستخدم /search .

آسف يا رفاق لغتي الإنجليزية.

قد تكون فكرة جيدة أن تتحقق من ملكيتك next.config.js useFileSystemPublicRoutes . إذا كانت خاطئة ، فهذا يعني أنه يجب عليك تحديد جميع معالجات التوجيه في server.js بنفسك.

هذا يعمل على إصلاح الوميض 404 بالنسبة لي:

وصلة

<Link href="/somepage?id=value" as="/somepage/value">

جانب الخادم

server.get("/somepage/:id", (req, res) => {
  return app.render(req, res, "/maps", { id: req.params.id })
})

معلمة الوصول على الصفحة

const { id } = this.props.url.query

إذن للإجابة على هذا السؤال مرة واحدة وإلى الأبد:

href => المسار داخل الدليل pages + سلسلة الاستعلام
as => في شريط عنوان url في المتصفح

مثال:

لديك عنوان url يسمى /products/:id

1. لقد أنشأت pages/product.js

export default class extends React.Component {
  static async getInitialProps({query}) {
    console.log('SLUG', query.slug)
    return {}
  }
  render() {
    return <h1>The product page</h1>
  }
}

1. يمكنك إضافة المسار للتعبير أو أي خادم آخر ، هذا فقط لـ SSR. ما سيفعله هذا هو توجيه عنوان url /products/:id إلى pages/product.js وتقديم id كجزء من query في getInitialProps:

server.get("/products/:slug", (req, res) => {
  return app.render(req, res, "/product", { slug: req.params.slug })
})

1. بالنسبة للتوجيه من جانب العميل ، يمكنك استخدام next/link مثل هذا:

<Link href="/product?slug=something" as="/products/something"> 

سبب وجوب تقديم href و as هو أن Next.js ليس على علم بأي صفحات أخرى من جانب العميل. لا نرسل بيانًا لجميع الصفحات إلى جانب العميل ويتم تحميل المسارات التالية كسول ، وهو أمر قابل للتطوير.

هناك حزمة مجتمعية تلخص بعيدًا توفر href و as عن طريق إرسال بيان محدد مسبقًا لجميع المسارات ، لاحظ أننا نوصي بعدم إرسال بيان كامل لجميع المسارات الممكنة لأن عدم القيام بذلك أكثر قابلية للتحجيم

https://github.com/fridays/next-routes

لاحظ أيضًا أن عرض 404 لم يعد هو السلوك الافتراضي لـ Next.js. بدلاً من ذلك ، نقوم بإعادة تحميل الصفحة لميزة المناطق.

شكرا تيم ، شرح واضح تماما!

تضمين التغريدة
إذا كان الرابط href و as. مررت قيمة مختلفة. كيف يمكنني الحصول على href وقيمة as .
أختبرني التجريبي. أعتقد أن req.params.slug ستكون as . ثم كيف يمكنني الحصول على href .

timneutkens لقد مشكلتي : د

كيف يتم تحويل مكون الارتباط إلى عنوان url هذا؟ هل تستخدم <Link href="/post/1"> أو <Link href="/post?id=1" as="/post/1"> ؟

يجب عليك وضع هذا في المستند. :مرح:

تضمين التغريدة

إذن للإجابة على هذا السؤال مرة واحدة وإلى الأبد:

href => المسار داخل الدليل pages + سلسلة الاستعلام
as => في شريط عنوان url في المتصفح

مثال:

لديك عنوان url يسمى /products/:id

1. لقد أنشأت pages/product.js

export default class extends React.Component {
  static async getInitialProps({query}) {
    console.log('SLUG', query.slug)
    return {}
  }
  render() {
    return <h1>The product page</h1>
  }
}

1. يمكنك إضافة المسار للتعبير أو أي خادم آخر ، وهذا _ فقط لـ SSR. ما سيفعله هذا هو توجيه عنوان url /products/:id إلى pages/product.js وتقديم id كجزء من query في getInitialProps:

server.get("/products/:slug", (req, res) => {
  return app.render(req, res, "/product", { slug: req.params.slug })
})

1. بالنسبة للتوجيه من جانب العميل ، يمكنك استخدام next/link مثل هذا:

<Link href="/product?slug=something" as="/products/something"> 

سبب وجوب تقديم href و as هو أن Next.js ليس على علم بأي صفحات أخرى من جانب العميل. لا نرسل بيانًا لجميع الصفحات إلى جانب العميل ويتم تحميل المسارات التالية كسول ، وهو أمر قابل للتطوير.

هناك حزمة مجتمعية تلخص بعيدًا توفر href و as عن طريق إرسال بيان محدد مسبقًا لجميع المسارات ، لاحظ أننا نوصي بعدم إرسال بيان كامل لجميع المسارات الممكنة لأن عدم القيام بذلك أكثر قابلية للتحجيم

https://github.com/fridays/next-routes

لاحظ أيضًا أن عرض 404 لم يعد هو السلوك الافتراضي لـ Next.js. بدلاً من ذلك ، نقوم بإعادة تحميل الصفحة لميزة المناطق.

ما يمكنني فعله إذا كان لدي فقط مجموعة من رؤوس القائمة مثل:
[ home: '/home', about:'/about', post: 'post/:post_id?' ] .
بعد ذلك أحصل على as's ، لكن ماذا عن href ؟ شكرا

ماذا لو كنت تستخدم router.push() بدلاً من <Link> كيف يمكنك تحقيق نفس النتائج؟

justinmchase كان لدي نفس المشكلة للتو. تحقق من وثائق Next Router إذا لم تكن قد قمت بذلك بالفعل.

يمكنك استخدامه كـ Router.push(url, as, options) :

Router.push('/post/[pid]', '/post/abc')

timneutkens أرغب في استضافة تطبيقي next.js على ZEIT.now لكن هذا ليس به خيار لتشغيل خادم سريع. هل أفقد عناوين url الخاصة بي الآن ويمكنني فقط عمل param=value&param=value أم أن هناك طريقة أخرى؟ المثال الذي نشره سيرجيو لا يبدو واعدًا

لقد جربت المسارات الديناميكية ولكن تطبيق الصفحة الواحدة الخاص بي معطل الآن وروابط مثل:

<Link href={`/integration?slug=${slug}`} as={`/integration/${slug}`}>

يتسبب الآن في إعادة تحميل صفحة كاملة لأن http: // localhost : 8080 / _next / static / development / pages / plans. js يعرض 404 غير موجود.

timneutkens أرغب في استضافة تطبيقي next.js على ZEIT.now لكن هذا ليس به خيار لتشغيل خادم سريع. هل أفقد عناوين url الخاصة بي الآن ويمكنني فقط عمل param=value&param=value أم أن هناك طريقة أخرى؟ المثال الذي نشره سيرجيو لا يبدو واعدًا

لست بحاجة إلى خادم مخصص للطرق الديناميكية ، راجع https://nextjs.org/docs/routing/dynamic-routes

timneutkens شكرًا لك على ردك السريع ، لقد جربت المسارات الديناميكية ولكني next في البرنامج النصي package.json الخاص بي في وضع dev.

تم حلها من خلال الحصول على pages/integration/index.js مع الكود و pages/integration/[slug].js مع:

import ProductDetailPage from './index'
export default ProductDetailPage

الطريقة الصحيحة للقيام بما حددته هي إنشاء pages/integration/[slug].js

واربطها بهذه الطريقة:

<Link href={`/integration/[slug]`} as={`/integration/${slug}`}>

مرحبًا ، هل يمكنني أن أسأل لماذا عندما اتصل بهذا

Router.push( '/about?id=1234','/about')

لا يمكن استرداد المعرف ، والصفحة التي أستخدمها هي [... index] .js وهي صفحة التقاط جميع الديناميكيات المتعددة ، ولكن إذا قمت بالتوجيه إلى صفحة أخرى ليست ديناميكية ، فيمكنها العمل بشكل صحيح على سبيل المثال car.js ادفع للمركبة js ..
هل هناك طريقة أفضل يمكنني من خلالها الضغط على صفحة الالتقاط الديناميكي الخاصة بي ثم إخفاء الهوية وما زلت قادرًا على استعادتها ..؟