# LocaleLink

Locale aware `<Link />` component for routing. See [here](https://github.com/zeit/next.js#with-link) for `<Link />` documentation.

> Ensure `<LocaleLink />` is rendered within [`createPage([...connectArgs])(Page, [reducers])`](/soya-next/api/create-page.md) hierarchy.

## Props

* `href` *(String|*[*URL Object*](https://nodejs.org/api/url.html#url_url_strings_and_url_objects)*)*: Path section of URL.
* \[`as`] *(String|*[*URL Object*](https://nodejs.org/api/url.html#url_url_strings_and_url_objects)*)*: Actual path (including the query) shows in the browser.
* \[`locale`] *(String)*: A locale string, e.g. `id-id`, `en-id`, etc.
* \[`passHref`] *(Boolean)*: Passes href to `<a>` child that doesn't have href attribute.
* \[`prefetch`] *(Boolean)*: Allows all the future interaction paths of your app to be instant.
* \[`replace`] *(Boolean)*: Uses replace state instead of the default push state.
* \[`shallow`] *(Boolean)*: Allows changing URL without running `getInitialProps`.

## Examples

### Basic usage

```javascript
import LocaleLink from 'soya-next/link';

export default () => (
  <LocaleLink href="/">
    <a>Home</a>
  </LocaleLink>
);
```

### Navigating to custom routes

```javascript
import LocaleLink from 'soya-next/link';

const PostLink = () => (
  <li>
    <LocaleLink as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </LocaleLink>
  </li>
);

export default () => (
  <nav>
    <ul>
      <PostLink id="hello-nextjs" title="Hello Next.js" />
      <PostLink id="learn-nextjs" title="Learn Next.js is awesome" />
      <PostLink id="deploy-nextjs" title="Deploy apps with Zeit" />
    </ul>
  </div>
);
```

### Overriding locale

```javascript
import LocaleLink from 'soya-next/link';
import { withLocale } from 'soya-next/i18n';

const translations = {
  'id-id': {
    country: 'Indonesia',
    language: 'Bahasa',
  },
  'en-id': {
    country: 'Indonesia',
    language: 'English',
  },
  'en-sg': {
    country: 'Singapore',
    language: 'English',
  },
};

export default withLocale(({
  siteLocales = ['id-id', 'en-id', 'en-sg']
}) => (
  <div>
    {siteLocales.map(locale => (
      <LocaleLink locale={locale}>
        <a>{translations[locale].language} ({translations[locale].country})</a>
      </LocaleLink>
    ))}
  </div>
));
```

### Passing href attribute to `<a>`

```diff
import LocaleLink from 'soya-next/link';

export default () => (
  <LocaleLink
    href="/"
+   passHref
  >
    <a
-     href="/"
    >
      Home
    </a>
  </LocaleLink>
);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://traveloka.gitbook.io/soya-next/api/locale-link.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.