next routes

Dynamische Routen für Next.js

Bekanntmachung von Abschalt: Dieses Paket war in den ersten Jahren der nächsten Jahre eine beliebte Wahl und wird nicht mehr aufrechterhalten. Bitte überprüfen Sie die nächsten Dokumente.

Einfach zu verwendende universelle dynamische Routen für Next.js

• Route und Parameter im Express-Stil entsprechen
• Anfrage von Handler Middleware für Express & Co.
• Link und Router , die URLs mit Routendefinition erzeugen

Wie man benutzt

Installieren:

npm install next-routes --save

Erstellen Sie routes.js in Ihrem Projekt:

 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

Diese Datei wird sowohl auf dem Server als auch auf dem Client verwendet.

API:

• routes.add([name], pattern = /name, page = name)
• routes.add(object)

Argumente:

• name - Routename
• pattern -Routenmuster (wie Express, siehe Path-to-Regexp)
• page - Seite in ./pages zu rendern

Die Seitenkomponente empfängt die übereinstimmenden URL -Parameter, die in query zusammengefasst sind

 export default class Blog extends React . Component {
  static async getInitialProps ( { query } ) {
    // query.slug
  }
  render ( ) {
    // this.props.url.query.slug
  }
} 

Auf dem Server

 // 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 )
} )

Optional können Sie einen benutzerdefinierten Handler übergeben, zum Beispiel:

 const handler = routes . getRequestHandler ( app , ( { req , res , route , query } ) => {
  app . render ( req , res , route . page , query )
} )

Stellen Sie sicher, dass Sie server.js in Ihrem package.json -Skripte verwenden:

 "scripts" : {
  "dev" : " node server.js " ,
  "build" : " next build " ,
  "start" : " NODE_ENV=production node server.js "
}

Auf den Kunden

Importieren Sie Link und Router aus Ihrer Datei routes.js , um URLs basierend auf der Routendefinition zu generieren:

Link Beispiel

 // 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>

Requisiten:

• route - Routenname oder URL zu übereinstimmen (alias: to )
• params - Optionale Parameter für benannte Routen

Es generiert die URLs für href und as und rendert next/link . Andere Requisiten wie prefetch funktionieren ebenfalls.

Beispiel 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)

Argumente:

• route - Routenname oder URL zu übereinstimmen
• params - Optionale Parameter für benannte Routen
• options - an Next.js übergeben

Das gleiche funktioniert mit .replaceRoute() und .prefetchRoute()

Es generiert die URLs und ruft next/router

---

Optional können Sie einen benutzerdefinierten Link und Router -Objekte angeben, z. B.:

 const routes = module . exports = require ( 'next-routes' ) ( {
  Link : require ( './my/link' )
  Router : require ( './my/router' )
} ) 

---

Verwandte Links

• zeit/next.js - Framework für servergerenderte React -Anwendungen
• Path-to-Regexp-Express-Style-Pfad zu Regexp