动态路由为Next.js

这是从原始repo的版本派生出来的，并进行了一些增强

• 更新到最新的包（next.js和path-to-regexp）
• 更好的typescript支持
• 更多示例和实时代码沙箱
• 积极维护

欢迎pr ！

易于使用通用动态路由 Next.js

• 快速风格的路由和参数匹配
• express & co的请求处理程序中间件
• Link 和 Router 通过路由定义生成url

示例

CodeSandbox例子

如何使用

安装:

npm install next-routes-extended --save

创建 routes.js 在您的项目中：

const routes = require('next-routes-extended')

                                                    // 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 -路线模式(如快车，见 正则表达式路径）
• 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-extended')({
  Link: require('./my/link')
  Router: require('./my/router')
})

相关链接

• 时间/ next.js -用于服务器渲染React应用程序的框架
• 正则表达式路径 -表达式样式的路径到regexp