Solid Start Navigation

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 })

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

I have also tried not passing

replace: true

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 ...
}

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 ...
}

Solid Start Navigation

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 })

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

I have also tried not passing

replace: true

replace: true

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 ...
}

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 ...
}

Solid Start Navigation

Similar Threads

Solid Start Navigation

Similar Threads

Similar Threads

Similar Threads