Question 210436 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to link to the same page with a different parameter in SolidJS using SSG

I am struggling to get my SolidJS app to link user pages together using Static Site Generation (SSG).

/* App.jsx */
<Routes path="/user">
  <Route path="/:id" component={ User } />
</Routes>

function User() {
  const params = useParams()
  return (
    <OtherUsers url={ "json/photo/" + params.id } />
    /* More Components here */
  )
}

function OtherUsers(props) {
  const [users] = createResource(() => server.fetchData(props.url))
  return (
    <>
      <Show when={ users() }><Show when={ users()[0] }>
        <For each={ users() }>
          {(num, key) => 
          <img src={ num.photo } />
          <a href={ "/user/" + num.id } >{ num.name }</a>
          /* More fetched content here */
          }
        </For>
      </Show></Show>
    </>
  )
}

This work as expected in the development environment npm run dev. For example, I can navigate from /user/123 to /user/456.
However when constructed as a Static Site Generation (SSG) website npm run build, the anchor tag directs the browser to a page that doesn’t exist. For example, /user/456 returns a 404 error when navigating from /user/123 using the <a> tag (using SSG).

I have two solutions to fix the 404 error – but the both cause SolidJS to stop updating the page when the link is clicked.

First, the <A> component.

import { A } from "@solidjs/router"
...
<A href={ "/user/" + num.id } >{ num.name }</A>

Second, the useNavigate component.

import { useNavigate } from "@solidjs/router"
const navigate = useNavigate()
...
navigate("/user/" + num.id, { replace: true })

Both of these solutions update the url in the browser and the params.id appears to update. However User() and OtherUsers() are not triggered and so nothing on the page is re-drawn.

How do I force the page to re-draw?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    You can use SolidJS to create an Static Site Generation (SSG) app without setting up a complex server. App navigation must always start at index.html because this is the only html file generated when running npm run build. Here are some guidelines.

    Anchor Tags

    Avoid using <a> anchor tags. They prompt your browser to reload another url causing a 404 page not found error. Instead, use the <A> component to to dynamically change the route.

    Resources Signals and Effects

    Avoid using the SolidJS createResource component. It does not re-trigger when the properties of it's parent component change.

    /* Don't do this */
const [images] = createResource(() => server.fetchData(props.url))

    Instead, use createEffect to trigger whenever the properties of the parent component change and createSignal for the data of the DOM elements that you want re-drawn.

    /* Do this */
const [images, setImages] = createSignal([])
createEffect(() => {
  server.fetchData(props.url).then(json => setImages(json))
})

  2. 0

    However when constructed as a Static Site Generation (SSG) website, the anchor tag directs the browser to a page that doesn’t exist

    How do you serve your SSG site? You may need to setup redirects.

    Is it viable for you to use the Hash router integration?
    https://docs.solidjs.com/guides/how-to-guides/routing-in-solid/solid-router#hash-mode-router

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search