T
TanStack•3y ago
quickest-silver

"?" query missing on the anchor in Link component

I'm using the following code to render links in my sidebar to navigate in my webapp: 
// Scenario: User is currently on http://localhost:4200/schichten?company=GHT
export const SidebarItem: FC<SidebarItemProps> = ({ href, title, svg }) => {
  console.log(href); // It's "/schichten"

  // The finished anchor links to /schichtencompany=whatever
  // Should be /schichten?company=whatever
  // (It works fine in the drawer navigation / SPA-style navigation)
  return (
    <Link search to={href}>
      {({ isActive }) => (
        <SideBarItemIcon title={title} svg={svg} isActive={isActive} />
      )}
    </Link>
  );
};
// Scenario: User is currently on http://localhost:4200/schichten?company=GHT
export const SidebarItem: FC<SidebarItemProps> = ({ href, title, svg }) => {
  console.log(href); // It's "/schichten"

  // The finished anchor links to /schichtencompany=whatever
  // Should be /schichten?company=whatever
  // (It works fine in the drawer navigation / SPA-style navigation)
  return (
    <Link search to={href}>
      {({ isActive }) => (
        <SideBarItemIcon title={title} svg={svg} isActive={isActive} />
      )}
    </Link>
  );
};
As you can imagine, linking the user to /schichtencompany=whatever is suboptimal. It should be /schichten?company=whatever. Note that a single click uses client-side navigation, which works fine. But if the user opens the link in a new tab or uses another kind of navigation, this anchor doesn't work properly (because it links to the wrong location). Is there any way to fix this?
No description
1 Reply
quickest-silver
quickest-silverOP•3y ago
Turns out our stringifySearch function needed some work. Here's the updated config using query-string: 
export const reactLocation = new ReactLocation<MyLocationGenerics>({
  parseSearch: qs.parse,
  stringifySearch: (str) => {
    const search = qs.stringify(str);

    return search ? '?' + search : '';
  },
});
export const reactLocation = new ReactLocation<MyLocationGenerics>({
  parseSearch: qs.parse,
  stringifySearch: (str) => {
    const search = qs.stringify(str);

    return search ? '?' + search : '';
  },
});

Did you find this page helpful?