Parent route query params disappear when visiting child route

[kevinreber]

Summary

I have a Parent route and I would like to keep the query params from disappearing when viewing/visiting a Child route Outlet component (see video)

CleanShot_2023-11-25_at_15.48.39.mp4

Stackblitz playground: https://stackblitz.com/edit/remix-run-remix-uvugih?file=app%2Froutes%2Fparent.child.tsx

Current experience

- Parent Route
  "/parent?q=foobar"
- Child Route (removes parent query params)
  "/parent/child"

Desired experience

- Parent Route
  "/parent?q=foobar"
- Child Route (keeps parent query params)
  "/parent?q=foobar/child"

Maybe I'm just approaching things wrong 😅 but is there a suggested method to keep the query params of a parent route from disappearing when visiting a child route?

[lili21]

you need do it manually.

<Link to={`./child?${query}`}

[kevinreber]

It looks like your suggestion is to move the query to the child route? I'd like to avoid something like that in this scenario as it would refetch all the data being displayed in the Parent Route.

My route layout is similar to this

- parent.tsx
- parent.$childId.tsx

My particular scenario is:

1. A Parent Route that has a search bar to filter items using a query param (Ex: "/parent?q=foobar")
2. When a user clicks on an item, the Child Route will open a Modal using the item's unique ID. There should not be any changes to the Parent Route that is in the background of the Modal (Ex: "/parent?q=foobar/child123")
3. When the user closes the Modal, they are redirected back to the Parent Route with the initial query params (Ex: "/parent?q=foobar")

[kiliman]

That's not how URLs and query/search params work. The search params need to be at the end of the path: /parent/child123?q=foobar

The parent route can still access them, since they apply to the entire route, not just a single route segment.

You can create a custom <Link> component that always preserves the search params.

import { Link, type LinkProps, useLocation } from '@remix-run/react'

type MyLinkProps = LinkProps & { preserveSearch: boolean }

export function MyLink({
  to,
  preserveSearch,
  children,
  ...props
}: MyLinkProps) {
  const location = useLocation()
  return (
    <Link {...props} to={`${to}${preserveSearch ? location.search : ''}`}>
      {children}
    </Link>
  )
}

[kevinreber]

Ahh I see, had a feeling I was doing something wrong 😅
Thanks for all the context @kiliman! Always appreciate all the help 🙏

[lovelyKarthi]

@kiliman How to do the same with navigate()

in my case parent with few search params
/parent?source_id=1

If i click add item i need to maintain source_id can i do like below
/parent/add-item?source_id=1

or any other suggested method available?

[kiliman]

Just like in my example, useLocation will return the current pathname and search params. Build up the URL like the <Link to> and use that in navigate.