#Solid Start Navigation

5 messages · Page 1 of 1 (latest)

harsh plover
#

Hi,

I've got a Solid Start page, and want to navigate to a different page within a component.

I basically do the following:

const navigate = useNavigate();
navigate(`/${params.provider}/${params.mensa}/${nextDateString}`, { replace: true })

I have also tried not passing replace: true, doesnt change anything though.

The issue I have is this:
The URL changes, as well as the history. But the page content doesn't change, only when I refresh the page.

I guess this has something to do with navigating to the same page essentially, just with different params.

What's the correct way of handeling a navigation like this?
Thanks!

I dont really think it's necessary, but this is what my [provider]/[mensa]/[date].tsx looks like

export default function Home() {
  const params = useParams()
  // Parse Date from format: "DD-MM-YYYY"
  function parseDate(date: string): string {
    const [day, month, year] = date.split('-')
    // '2024-10-10 22:00:00+00'

    return `${year}-${month}-${day}`
  }
  const date = parseDate(params.date)
  const servings = createAsync(
    async () => getServings(params.mensa, date, 'de'),
    { deferStream: true },
  )

  const mensa = createAsync(() => getMensa(params.mensa), {
    deferStream: true,
  })

  return ...
}
harsh plover
harsh plover
#

Turns out it was the exact same problem: this is what I changed in case someone is having a similar problem:

const [servings] = createResource(() => {
    return {
      mensaSlug: params.mensa,
      date: parseDate(params.date),
      language: 'de' as const,
    }
  }, getServings, {
    deferStream: true,
  })
warped cosmos
#

To clarify the bug in your original code, const date = parseDate(params.date) loses reactivity on params.date. If you instead use const date = () => parseDate(params.date) and use date() you should be fine.

harsh plover
#

Ahh that makes sense! would it also work to call parseDate in the createAsync directly?
Like this

const servings = createAsync(
    async () => getServings(params.mensa, parseDate(date), 'de'),
    { deferStream: true },
  )