How to create a route

Scene

Create a scene component for example src/scenes/Foobar

Route Config

Edit the file src/modules/routing/components/RoutingProvider.jsx, and add the config:

import Foobar from '../../../scenes/Foobar';
// …

{
  path: '/foobar',
  exact: true,
  component: Foobar,
  app: 'contact',
  tab: {
    type: 'default',
    icon: 'foobar',
    renderLabel: () => i18n._('route.foobar.label', null, { defaults: 'Foobar' }),
    // use tabMatchPathname or tabMatchRoute when path uses params e.g. /foobar/:id
    tabMatch: tabMatchPathname,
  },
}

Tab implementation

Optionnally use a specific tab for a custom label or icon to render.

Change the tab's type previously set:

tab: {
    -type: 'default',
    +type: 'foobar',
    icon: 'foobar',
    renderLabel: () => i18n._('route.foobar.label', null, { defaults: 'Foobar' }),

FIXME: finish refactor and rename Page2 into Page

Create a tab component in src/layouts/Page2/components/Navbar/components

import React from 'react';
import classnames from 'classnames';
// …
import { Icon } from '../../../../../../components';
import { getTabUrl } from '../../../../../../modules/tab';
import Tab from '../Tab';
import NavbarItem from '../NavbarItem';
import ItemLink from '../ItemLink';
import ItemButton from '../ItemButton';

// …

class FoobarTab extends Tab {
  render() {
    const {
      className,
      isActive,
      tab,
      routeConfig,
    } = this.props;

    const label = routeConfig.tab.renderLabel();

    return (
      <NavbarItem
        className={classnames('m-tab', className)}
        active={isActive}
        contentChildren={(
          <ItemLink
            to={getTabUrl(tab.location)}
            title={label}
            className="m-tab__content"
          >
            <Icon type="foobar" className="m-tab__icon" rightSpaced />
            {label}
          </ItemLink>
        )}
        actionChildren={<ItemButton onClick={this.handleRemove} icon="remove" className="m-tab__action" />}
      />
    );
  }
}

Edit the file src/layouts/Page2/components/Navigation/presenter.jsx and make a condition to render the specific tab:

switch (routeConfig.tab.type) {
  // …
  case 'foobar':
    return (
      <FoobarTab
        key={this.getTabIdentifier(tab.location)}
        tab={tab}
        routeConfig={routeConfig}
        isActive={isActive}
        onRemove={removeTab}
      />
    );