提交 c8c4efba 编写于 作者: L Luis Alvarez D 提交者: Tim Neutkens

Remove the parameterized-routing example (#9297)

* Remove the example

* Include readme with link to alternative
上级 7fe42fb0
# Parametrized routes example (dynamic routing)
## How to use
### Using `create-next-app`
Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
```bash
npx create-next-app --example parameterized-routing parameterized-routing-app
# or
yarn create next-app --example parameterized-routing parameterized-routing-app
```
### Download manually
Download the example:
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/parameterized-routing
cd parameterized-routing
```
Install it and run:
```bash
npm install
npm run dev
# or
yarn
yarn dev
```
See now documentation [here](https://zeit.co/docs/v2/deployments/routes/) and Next.js example [here](https://zeit.co/examples/nextjs/) for info on deploying with [now](https://zeit.co/now) ([download](https://zeit.co/download))
## The idea behind the example
Next.js allows [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can, as we show in this example, parametrize your routes. What we are doing in `server.js` is matching any route with the pattern `/blog/:id` and then passing the id as a parameter to the `pages/blog.js` page.
This example has been deprecated and removed in favor of [examples/dynamic-routing](https://github.com/zeit/next.js/tree/canary/examples/dynamic-routing)
{
"name": "parameterized-routing",
"version": "1.0.0",
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
},
"dependencies": {
"next": "latest",
"path-match": "1.2.4",
"react": "^16.7.0",
"react-dom": "^16.7.0"
}
}
import React from 'react'
export default class extends React.Component {
static getInitialProps ({ query: { id } }) {
return { id }
}
render () {
return (
<div>
<h1>My {this.props.id} blog post</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
)
}
}
import Link from 'next/link'
export default () => (
<ul>
<li>
<Link href='/blog?id=first' as='/blog/first'>
<a>My first blog post</a>
</Link>
</li>
<li>
<Link href='/blog?id=second' as='/blog/second'>
<a>My second blog post</a>
</Link>
</li>
<li>
<Link href='/blog?id=last' as='/blog/last'>
<a>My last blog post</a>
</Link>
</li>
</ul>
)
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const pathMatch = require('path-match')
const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
const route = pathMatch()
const match = route('/blog/:id')
app.prepare().then(() => {
createServer((req, res) => {
const { pathname, query } = parse(req.url, true)
const params = match(pathname)
if (params === false) {
handle(req, res)
return
}
// assigning `query` into the params means that we still
// get the query string passed to our application
// i.e. /blog/foo?show-comments=true
app.render(req, res, '/blog', Object.assign(params, query))
}).listen(port, err => {
if (err) throw err
console.log(`> Ready on http://localhost:${port}`)
})
})
......@@ -1273,7 +1273,6 @@ export default (req, res) => {
<li><a href="/examples/custom-server-express">Express integration</a></li>
<li><a href="/examples/custom-server-hapi">Hapi integration</a></li>
<li><a href="/examples/custom-server-koa">Koa integration</a></li>
<li><a href="/examples/parameterized-routing">Parameterized routing</a></li>
<li><a href="/examples/ssr-caching">SSR caching</a></li>
</ul>
</details>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册