اذهب إلى المحتوى
  • 0

param ديناميكي للرابط في next js

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

السؤال

في ى next داخل مجلد pages نستطيع انشاء ملفات و ال route يكون حسب أسماء الملفات والأن انا لدي ملف post.js واريد ال route ان يكون  post/1/ لجلب مستند post بال id الخاص به في react router يمكن فعلها بهذه الطريقة 

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";



export default function ParamsExample() {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>

        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

function Child() {
 
  let { id } = useParams();

  return (
    <div>
      <h3>ID: {id}</h3>
    </div>
  );
}

لكن كيف يمكن ذلك في next js

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يمكنك تنفيذ ذلك في next من خلال الملفات بسهولة من خلال ال dynamic route حيث سيكون شكل الملفات كالتالي " pages/post/[id].js " ثم يمكنك عرض ال post كالتالي

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

يمكنك أن تجد المزيد من المعلومات هنا

تم التعديل في بواسطة عبدالباسط ابراهيم
إضافة رابط
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...