Locale in routes

Using locales with Universal Router

by Vladimir Kutepov

HTML

<script src="https://npmcdn.com/[email protected]/universal-router.js"></script>
<script src="https://fb.me/react-with-addons-15.3.0.js"></script>
<script src="https://fb.me/react-dom-15.3.0.js"></script>
<div id="root"></div>

Babel + JSX

function Layout({ path, locale, title, children }) {
  return (
    <div>
      <p>
        <b>Navigation:</b>{' '}
        <Link to="/en/a">Page EN</Link>{' '}
        <Link to="/es/b">Page ES</Link>{' '}
        <Link to="/fr/c">Page FR</Link>
      </p>
      <div>
        <h1>{title}</h1>
        {children}
        <p>
          Current path: {path + ''}<br />
          Current locale: {locale + ''}
        </p>
      </div>
    </div>
  )
}

function PageA() {
  return <p className="a">Sed id ipsum vitae nulla suscipit sagittis.</p>
}
function PageB() {
  return <p className="b">Integer semper risus at sem posuere tempor.</p>
}
function PageC() {
  return <p className="c">Ut vulputate lectus at ex rhoncus pulvinar.</p>
}

class Link extends React.Component {
  onClick = (event) => {
    event.preventDefault();
    const path = event.currentTarget.pathname;
    navigateTo(path);
  }
  render() {
    return (
      <a href={this.props.to} onClick={this.onClick}>
        {this.props.children}
      </a>
    );
  }
}

const routes = {
  path: '/:locale',
  async action({ next }) {
    const page = await next();
    if (page) {
      return (
        <Layout
          path={page.context.path}
          locale={page.context.params.locale}
          title={page.title}
        >
          {page.component}
        </Layout>
      );
    }
  },
  children: [
    { path: '/a', action(context) {
      return { context, title: 'Title in English', component: <PageA /> };
    }},
    { path: '/b', action(context) {
      return { context, title: 'Título en español', component: <PageB /> };
    }},
    { path: '/c', action(context) {
      return { context, title: 'Titre en français', component: <PageC /> };
    }}
  ]
};

function navigateTo(path) {
  UniversalRouter
    .resolve(routes, { path })
    .then(component =>
      ReactDOM.render(component, document.getElementById('root'))
    )
    .catch(error => console.log(error));
}

navigateTo('/en/a');