Skip to content

Commit

Permalink
chore(docs): Update FS route api client only splat description (#34546)
Browse files Browse the repository at this point in the history
Co-authored-by: Lennart <lekoarts@gmail.com>
  • Loading branch information
tyhopp and LekoArts committed Jan 20, 2022
1 parent e9cd0ba commit e1e55c9
Showing 1 changed file with 24 additions and 4 deletions.
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

0 comments on commit e1e55c9

Please sign in to comment.