LocaleLink

Locale aware <Link /> component for routing. See here for <Link /> documentation.

Ensure <LocaleLink /> is rendered within createPage([...connectArgs])(Page, [reducers]) hierarchy.

Props

• href (String|URL Object): Path section of URL.

• [as] (String|URL Object): 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

import LocaleLink from 'soya-next/link';

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

Navigating to custom routes

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

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>

import LocaleLink from 'soya-next/link';

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