Skip to main content
Version: next

3.21 -> 3.22

This page lists the highlights for upgrading a project from Front-Commerce 3.21 to 3.22

Update dependencies​

Update all your @front-commerce/* dependencies to this version:

pnpm update "@front-commerce/*@3.22.0"

Manual Migration​

Account navigation active state​

The account navigation (theme/modules/User/AccountNavigation/AccountNavigation) now marks the dashboard item active only on /user, instead of leaving it inactive on the dashboard itself while keeping it active on every other account page. Two changes make this work together: the dashboard link no longer has a trailing slash, and AccountNavigationItem now forwards its exact prop to NavLink as end so exact-match items no longer match descendant routes.

If you override this component, mirror both changes:

theme/modules/User/AccountNavigation/AccountNavigation.jsx
  const AccountNavigationItem = ({ exact, path, icon, label, disabled }) => {
    return (
      <div className="account-navigation__item">
        <NavLink
          to={path}
+         end={exact}
          className={({ isActive }) => makeClassName(isActive, disabled)}
        >
          <LabelledIcon icon={icon}>{label}</LabelledIcon>
        </NavLink>
      </div>
    );
  };
theme/modules/User/AccountNavigation/AccountNavigation.jsx
  <AccountNavigationItem
    exact={true}
-   path="/user/"
+   path="/user"
    icon="cog"
    label={intl.formatMessage(messages.dashboardLink)}
  />