S
SolidJS•4w ago
Liquido

Client side navigation does not render a page

I am using FileRouter and I have a page in this file: 
/routes/items/(view-item).tsx
/routes/items/(view-item).tsx
I also have a sidebar where the links in the sidebar are defined using the <A> tag: 
function SidebarLink(props) {
  return <A href={props.href}>{props.children}</A>
}

function Sidebar() {
  // simplified version
  return <ul>
    <li><SidebarLink href="/items">Items</SidebarLink></li>
    <li><SidebarLink href="/users">Users</SidebarLink></li> {/* this page does not exist on purpose */}
  </ul>
}
function SidebarLink(props) {
  return <A href={props.href}>{props.children}</A>
}

function Sidebar() {
  // simplified version
  return <ul>
    <li><SidebarLink href="/items">Items</SidebarLink></li>
    <li><SidebarLink href="/users">Users</SidebarLink></li> {/* this page does not exist on purpose */}
  </ul>
}
When I navigate to "users", I get the 404 page as expected and I see that the 404 component is rendered. However, when I navigate to "/items", the page does not render anything (full blank). If I refresh the page, everything renders as expected.
1 Reply
Liquido
LiquidoOP•4w ago
Upon further inspection, I found the main block of code that causes this. I have a server function wrapped in cache that queries data from db and returns the output. The existence of the function, even without using it (I am only returning "hello world" with no hooks etc) causes the page not load.

Did you find this page helpful?