next routes

เส้นทางไดนามิกสำหรับ next.js

ประกาศการเสื่อมสภาพ: แพ็คเกจนี้เป็นตัวเลือกยอดนิยมในช่วงปีแรก ๆ ของ Js และไม่ได้รับการดูแลอีกต่อไป โปรดตรวจสอบเอกสาร next.js สำหรับวิธีการกำหนดเส้นทางปัจจุบัน

ใช้เส้นทางแบบไดนามิกสากลที่ใช้งานง่ายสำหรับ next.js

• การจับคู่เส้นทางและพารามิเตอร์แบบด่วน
• ขอ Handler Middleware สำหรับ Express & Co
• 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 ของคุณ:

 "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' )
} ) 

---

ลิงค์ที่เกี่ยวข้อง

• Zeit/Next.js - เฟรมเวิร์กสำหรับแอปพลิเคชัน React ที่แสดงเซิร์ฟเวอร์
• เส้นทางสู่การรีเจ็กซ์-เส้นทางสไตล์ด่วนไปยัง regexp