S
SolidJS•4mo ago
Eric

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, 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 ...
}
4 Replies
Eric
EricOP•4mo ago
This seems to be related to this: https://discordapp.com/channels/722131463138705510/1223010243433332776 I'm currently trying to follow what has been discussed there 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,
  })
const [servings] = createResource(() => {
    return {
      mensaSlug: params.mensa,
      date: parseDate(params.date),
      language: 'de' as const,
    }
  }, getServings, {
    deferStream: true,
  })
Erik Demaine
Erik Demaine•4mo ago
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.
Eric
EricOP•4mo ago
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 },
  )
const servings = createAsync(
    async () => getServings(params.mensa, parseDate(date), 'de'),
    { deferStream: true },
  )
Erik Demaine
Erik Demaine•4mo ago
It should, because it's wrapped in a function there

Did you find this page helpful?