-
Notifications
You must be signed in to change notification settings - Fork 26.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for URL objects in Link and Router (#1345)
* Add support for URL objects in Link and Router * Fix typo in comment * Fix possible bug if the `href` prop is `null` * Document the usage of URL objects in Link and Router * Update readme.md * Parse URL to get the host & hostname in `isLocal` This should check if the current location and the checked URL have the same `host` or `hostname`. * Format `as` parameter from object to string if required * Format `href` and `as` inside the construct and componentWillReceiveProps * Use `JSON.stringify` to compare objects * Add usage example * chore(package): update chromedriver to version 2.28.0 (#1386) https://greenkeeper.io/ * Refactor the codebase a bit. * Change the example name. * Add a few test cases. * Add the example to the README.
- Loading branch information
Showing
11 changed files
with
242 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
# URL object routing | ||
|
||
## How to use | ||
|
||
Download the example [or clone the repo](https://github.com/zeit/next.js): | ||
|
||
```bash | ||
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-url-object-routing | ||
cd with-url-object-routing | ||
``` | ||
|
||
Install it and run: | ||
|
||
```bash | ||
npm install | ||
npm run dev | ||
``` | ||
|
||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) | ||
|
||
```bash | ||
now | ||
``` | ||
|
||
## The idea behind the example | ||
|
||
Next.js allows using [Node.js URL objects](https://nodejs.org/api/url.html#url_url_strings_and_url_objects) as `href` and `as` values for `<Link>` component and parameters of `Router#push` and `Router#replace`. | ||
|
||
This simplify the usage of parameterized URLs when you have many query values. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
{ | ||
"scripts": { | ||
"dev": "node server.js", | ||
"build": "next build", | ||
"start": "NODE_ENV=production node server.js" | ||
}, | ||
"dependencies": { | ||
"next": "beta", | ||
"path-match": "1.2.4", | ||
"react": "^15.4.2", | ||
"react-dom": "^15.4.2" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import React from 'react' | ||
import Link from 'next/link' | ||
import Router from 'next/router' | ||
|
||
const href = { | ||
pathname: '/about', | ||
query: { name: 'zeit' } | ||
} | ||
|
||
const as = { | ||
pathname: '/about/zeit', | ||
hash: 'title-1' | ||
} | ||
|
||
const handleClick = () => Router.push(href, as) | ||
|
||
export default (props) => ( | ||
<div> | ||
<h1>About {props.url.query.name}</h1> | ||
{props.url.query.name === 'zeit' ? ( | ||
<Link href='/'> | ||
<a>Go to home page</a> | ||
</Link> | ||
) : ( | ||
<button onClick={handleClick}>Go to /about/zeit</button> | ||
)} | ||
</div> | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import React from 'react' | ||
import Link from 'next/link' | ||
|
||
const href = { | ||
pathname: '/about', | ||
query: { name: 'next' } | ||
} | ||
|
||
const as = { | ||
pathname: '/about/next', | ||
hash: 'title-1' | ||
} | ||
|
||
export default () => ( | ||
<div> | ||
<h1>Home page</h1> | ||
<Link href={href} as={as}> | ||
<a>Go to /about/next</a> | ||
</Link> | ||
</div> | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
const { createServer } = require('http') | ||
const { parse } = require('url') | ||
const next = require('next') | ||
const pathMatch = require('path-match') | ||
|
||
const dev = process.env.NODE_ENV !== 'production' | ||
const app = next({ dev }) | ||
const handle = app.getRequestHandler() | ||
const route = pathMatch() | ||
const match = route('/about/:name') | ||
|
||
app.prepare() | ||
.then(() => { | ||
createServer((req, res) => { | ||
const { pathname } = parse(req.url) | ||
const params = match(pathname) | ||
if (params === false) { | ||
handle(req, res) | ||
return | ||
} | ||
|
||
app.render(req, res, '/about', params) | ||
}) | ||
.listen(3000, (err) => { | ||
if (err) throw err | ||
console.log('> Ready on http://localhost:3000') | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters