next routes

Next.js의 동적 경로

감가 상각 통지 :이 패키지는 다음 초에 다음 해에 인기있는 선택이며 더 이상 유지 관리되지 않습니다. 현재 라우팅 방법은 다음에 다음으로 다음 .js 문서를 확인하십시오.

다음에 사용하기 쉬운 보편적 인 동적 경로

• 익스프레스 스타일 경로 및 매개 변수 일치
• Express & Co에 대한 핸들러 미들웨어를 요청하십시오
• 경로 정의에 따라 URL을 생성하는 Link 및 Router

사용 방법

설치하다:

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

package.json 스크립트에서 server.js 사용해야합니다.

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

고객에게

경로 정의를 기반으로 URL을 생성하려면 routes.js 파일에서 Link 및 Router 가져 오기 :

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 -Route Name 또는 URL 일치 (별칭 : to )
• params - 명명 된 경로의 선택적 매개 변수

href 및 as 에 대한 URL을 생성하고 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 -Route Name 또는 URL과 일치합니다
• params - 명명 된 경로의 선택적 매개 변수
• options - 다음으로 전달되었습니다 .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 Applications의 프레임 워크
• 경로 대 레지스-레지 즈프로가는 익스프레스 스타일 경로