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>
);

withLocale

Examples

Last modified 4yr ago