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.

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

chore(docs): Update FS route api client only splat description #34546

Merged
merged 4 commits into from
Jan 20, 2022
Merged
Changes from all commits
Commits
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
28 changes: 24 additions & 4 deletions docs/docs/reference/routing/file-system-route-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -214,12 +214,32 @@ You can use square brackets (`[ ]`) in the file path to mark any dynamic segment

#### Splat routes

Gatsby also supports _splat_ (or wildcard) routes, which are routes that will match _anything_ after the splat. These are less common, but still have use cases. As an example, suppose that you are rendering images from [S3](/docs/how-to/previews-deploys-hosting/deploying-to-s3-cloudfront/) and the URL is actually the key to the asset in AWS. Here is how you might create your file:
Gatsby also supports _splat_ (or wildcard) routes, which are routes that will match _anything_ after the splat. These are less common, but still have use cases. Use three periods in square brackets (`[...]`) in a file path to mark a page as a splat route. You can also name the parameter your page receives by adding a name after the three periods (`[...myNameKey]`).

- `src/pages/image/[...awsKey].js` will generate a route like `/image/*awsKey`
- `src/pages/image/[...].js` will generate a route like `/image/*`
As an example, suppose that you are rendering images from [S3](/docs/how-to/previews-deploys-hosting/deploying-to-s3-cloudfront/) and the URL is actually the key to the asset in AWS. Here is how you might create your file:

Three periods `...` mark a page as a splat route. Optionally, you can name the splat as well, which has the benefit of naming the key of the property that your component receives.
- `src/pages/image/[...].js` will generate a route like `/image/*`. `*` is accessible in your page's received properties with the key name `*`.
- `src/pages/image/[...awsKey].js` will generate a route like `/image/*awsKey`. `*awsKey` is accessible in your page's received properties with the key name `awsKey`.

```js:title=src/pages/image/[...].js
export default function ImagePage({ params }) {
const param = params[`*`]

// When visiting a route like `image/hello/world`,
// the value of `param` is `hello/world`.
}
```

```js:title=src/pages/image/[...awsKey].js
export default function ImagePage({ params }) {
const param = params[`awsKey`]

// When visiting a route like `image/hello/world`,
// the value of `param` is `hello/world`.
}
```

Splat routes may not live in the same directory as regular client only routes.

### Examples

Expand Down