Best Practices for Propagating Search Parameters on Navigation

[Gep93]

We have a menu which dynamically renders menu items (styled react router Link components) based on array of elements.

Example of menu items array:

export const MENU_ITEMS: TMenuItems = [
  {
    type: EMenuItem.PAGE,
    icon: 'shapes',
    to: '/events',
    label: 'Events',
  },
  {
    type: EMenuItem.PAGE,
    icon: 'misc',
    to: '/other',
    label: 'Other',
  },
];

Let's say our events page has filter state in the search params. User can logout and log back in or refresh the page and the filters are re-initialised from the URL params when this happens. This works well.

Now let's consider another case. User is on events page, has some filter state in search params and decides to click on events page menu item. Filters are lost. Reason for this is that in this case we navigate to /events page without propagating search params.

We could sync search params with localStorage or some other store but I would prefer that for now we don't have to do this.

Does anybody know an elegant solution for this?

Our menu and menu-items components:

const Menu = ({ open, mobile }: { open: boolean; mobile: boolean }) => {
  const shrink = !open && !mobile;
  return (
    <ul>
      {MENU_ITEMS.map((item, index) => {
        if (item.type === EMenuItem.PAGE) {
          return (
            <MenuItem key={index} index={index} shrink={shrink} {...item} />
          );
        }

        return <div>Implement group</div>;
      })}
    </ul>
  );
};

export default Menu;

export const MenuItem = (
  props: IMenuItem & { shrink: boolean; index: number },
) => {
  const { icon, to, label, shrink, index } = props;
  return (
    <li className={cn(index ? 'mt-2' : 'mt-0')}>
      <Link
        to={to}
        className={cn(
          'flex items-center overflow-hidden rounded-lg text-lg text-typography-400 h-11 px-4 hover:bg-gray-50',
          shrink ? 'animate-shrink-menu-item' : 'animate-expand-menu-item',
        )}
        activeProps={{
          className: '!text-primary-600 !bg-primary-25 ',
        }}
        activeOptions={{ exact: false }}>
        <div className='flex justify-center w-[30px] h-6'>
          <ChronologerIcon icon={icon} fontSize={24} />
        </div>
        <span
          className={cn(
            'transition-all duration-300 ease-in-out overflow-hidden',
            shrink ? 'opacity-0 w-0' : 'opacity-100 w-auto',
          )}>
          {label}
        </span>
      </Link>
    </li>
  );
};

I have a short term solution for this but in my opinion it is a bad one and in best case temporary:

export const MenuItem = (
  props: IMenuItem & { shrink: boolean; index: number },
) => {
  const { icon, to, label, shrink, index } = props
  const search = useSearch(to as any);
  const { pathname } = window.location;
  const linkOpts = linkOptions({
    to,
    search: to === pathname ? search : undefined,
  });

  return (
    <li className={cn(index ? 'mt-2' : 'mt-0')}>
      <Link
        {...linkOpts}
        className={cn(
          'flex items-center overflow-hidden rounded-lg text-lg text-typography-400 h-11 px-4 hover:bg-gray-50',
          shrink ? 'animate-shrink-menu-item' : 'animate-expand-menu-item',
        )}
....

[schiller-manuel]

why not use local or session storage?

[Gep93]

Yeah, that was one of the ideas that I also pointed out. I was just wondering if I am missing something in regards to the use of the router.

Thanks for your answer 👍

[schiller-manuel]

I think it should be persisted in one of those storages. ideally router had some APIs to automate this, we could add this in the future...

[Gep93]

That sounds like a good addition to the router. Thank you for your time. I will be saving the filters to LS for now.

[levrik]

Couldn't you add the current search params to the link in the menu if the current location matches the target location of the menu link? Should be doable with useMatch or similar hooks?

[Gep93]

The task is currently on hold but what I did up to this point is:

• In the menu I do exactly as you suggested. I had similar solution before but started out with useSearch hook. This works well when user clicks on the active menu item.
• In our filter component I sync filters with localStorage on every filter change. This handles situations when user navigates to another page and then navigates back.

For not this looks ok, but I need to do some more testing / refactoring when I get back to the task.

Thanks for your input 👍