Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dynamic link docs to the dynamic routing section #8001

Merged
merged 1 commit into from
Jul 16, 2019
Merged

Add dynamic link docs to the dynamic routing section #8001

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 19 additions & 42 deletions packages/next/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,19 +300,22 @@ export default Post
Any route like `/post/1`, `/post/abc`, etc will be matched by `pages/post/[pid].js`.
The matched path parameter will be sent as a query parameter to the page.

> Note: A `<Link>` for a Dynamic Route looks like so:
>
> ```jsx
> <Link href="/post/[pid]" as="/post/abc">
> <a>First Post</a>
> </Link>
> ```
>
> You can [read more about `<Link>` here](#with-link).

For example, the route `/post/1` will have the following `query` object: `{ pid: '1' }`.
For example, the route `/post/abc` will have the following `query` object: `{ pid: 'abc' }`.
Similarly, the route `/post/abc?foo=bar` will have the `query` object: `{ foo: 'bar', pid: 'abc' }`.

A `<Link>` for `/post/abc` looks like so:

```jsx
<Link href="/post/[pid]" as="/post/abc">
<a>First Post</a>
</Link>
```

- `href`: the path inside `pages` directory
- `as`: the path that will be rendered in the browser URL bar

> You can [read more about `<Link>` here](#with-link).

However, if a query and route param name are the same, route parameters will override the matching query params.
For example, `/post/abc?pid=bcd` will have the `query` object: `{ pid: 'abc' }`.

Expand Down Expand Up @@ -404,7 +407,7 @@ When you need state, lifecycle hooks or **initial data population** you can expo
Using a stateless function:

```jsx
import fetch from 'isomorphic-unfetch';
import fetch from 'isomorphic-unfetch'

function Page({ stars }) {
return <div>Next stars: {stars}</div>
Expand Down Expand Up @@ -528,36 +531,6 @@ function About() {
export default About
```

**Dynamic Routes**

`<Link>` component has two relevant props when using _Dynamic Routes_:

- `href`: the path inside `pages` directory
- `as`: the path that will be rendered in the browser URL bar

Consider the page `pages/post/[postId].js`:

```jsx
import { useRouter } from 'next/router'

const Post = () => {
const router = useRouter()
const { postId } = router.query

return <p>My Blog Post: {postId}</p>
}

export default Post
```

A link for `/post/first-post` looks like this:

```jsx
<Link href="/post/[postId]" as="/post/first-post">
<a>First Post</a>
</Link>
```

**Custom routes (using props from URL)**

If you find that your use case is not covered by [Dynamic Routing](#dynamic-routing) then you can create a custom server and manually add dynamic routes.
Expand Down Expand Up @@ -590,10 +563,14 @@ Example:
```

4. For client side routing, use `next/link`:

```jsx
<Link href="/post?slug=something" as="/post/something">
```

- `href`: the path inside `pages` directory
- `as`: the path used by your server routes

Client-side routing behaves exactly like the browser:

1. The component is fetched.
Expand Down