next routes
1.4.2
إشعار الإهمال: كانت هذه الحزمة خيارًا شائعًا في السنوات الأولى من Next.js ولم يعد يتم الحفاظ عليه. يرجى التحقق من مستندات next.js لطرق التوجيه الحالية.
سهلة الاستخدام طرق ديناميكية عالمية لـ Next.js
Link Router الذي يولد عناوين URL عن طريق تعريف الطريق ثَبَّتَ:
npm install next-routes --save إنشاء routes.js داخل مشروعك:
const routes = require ( 'next-routes' )
// Name Page Pattern
module . exports = routes ( ) // ---- ---- -----
. add ( 'about' ) // about about /about
. add ( 'blog' , '/blog/:slug' ) // blog blog /blog/:slug
. add ( 'user' , '/user/:id' , 'profile' ) // user profile /user/:id
. add ( '/:noname/:lang(en|es)/:wow+' , 'complex' ) // (none) complex /:noname/:lang(en|es)/:wow+
. add ( { name : 'beta' , pattern : '/v3' , page : 'v3' } ) // beta v3 /v3يتم استخدام هذا الملف على كل من الخادم والعميل.
API:
routes.add([name], pattern = /name, page = name)routes.add(object)الحجج:
name - اسم المسارpattern -نمط الطريق (مثل Express ، انظر PATH-TO-REGEXP)page - صفحة من الداخل ./pages الصفحات المراد تقديمها يتلقى مكون الصفحة معلمات URL المتطابقة المدمجة في query
export default class Blog extends React . Component {
static async getInitialProps ( { query } ) {
// query.slug
}
render ( ) {
// this.props.url.query.slug
}
} // server.js
const next = require ( 'next' )
const routes = require ( './routes' )
const app = next ( { dev : process . env . NODE_ENV !== 'production' } )
const handler = routes . getRequestHandler ( app )
// With express
const express = require ( 'express' )
app . prepare ( ) . then ( ( ) => {
express ( ) . use ( handler ) . listen ( 3000 )
} )
// Without express
const { createServer } = require ( 'http' )
app . prepare ( ) . then ( ( ) => {
createServer ( handler ) . listen ( 3000 )
} )اختياريا يمكنك تمرير معالج مخصص ، على سبيل المثال:
const handler = routes . getRequestHandler ( app , ( { req , res , route , query } ) => {
app . render ( req , res , route . page , query )
} ) تأكد من استخدام server.js في البرامج package.json . json:
"scripts" : {
"dev" : " node server.js " ,
"build" : " next build " ,
"start" : " NODE_ENV=production node server.js "
} استيراد Link Router من ملف routes.js لإنشاء عناوين URL بناءً على تعريف الطريق:
Link // pages/index.js
import { Link } from '../routes'
export default ( ) => (
< div >
< div > Welcome to Next.js! </ div >
< Link route = "blog" params = { { slug : 'hello-world' } } >
< a > Hello world </ a >
</ Link >
or
< Link route = "/blog/hello-world" >
< a > Hello world </ a >
</ Link >
</ div >
)API:
<Link route='name'>...</Link><Link route='name' params={params}> ... </Link><Link route='/path/to/match'> ... </Link>الدعائم:
route - اسم المسار أو عنوان URL للمطابقة (الاسم المستعار: to )params - معلمات اختيارية للطرق المسماة يولد عناوين URL لـ href و as وتجعل next/link . ستعمل الدعائم الأخرى مثل prefetch أيضًا.
Router // pages/blog.js
import React from 'react'
import { Router } from '../routes'
export default class Blog extends React . Component {
handleClick ( ) {
// With route name and params
Router . pushRoute ( 'blog' , { slug : 'hello-world' } )
// With route URL
Router . pushRoute ( '/blog/hello-world' )
}
render ( ) {
return (
< div >
< div > { this . props . url . query . slug } </ div >
< button onClick = { this . handleClick } > Home </ button >
</ div >
)
}
}API:
Router.pushRoute(route)Router.pushRoute(route, params)Router.pushRoute(route, params, options)الحجج:
route - اسم المسار أو عنوان URL للمطابقةparams - معلمات اختيارية للطرق المسماةoptions - تم نقلها إلى Next.js نفس الشيء يعمل مع .replaceRoute() و .prefetchRoute()
يولد عناوين URL والمكالمات next/router
اختياريا يمكنك توفير كائنات Link Router مخصص ، على سبيل المثال:
const routes = module . exports = require ( 'next-routes' ) ( {
Link : require ( './my/link' )
Router : require ( './my/router' )
} ) 
