Carl (klequis) Posts - Answer Overflow

Carl (klequis)

•Created by Carl (klequis) on 6/17/2024 in #support

Routing: Component/UI Element not rendered

Running with the dev server, I have been having a frequent problem with routing. I think it is related to adding new routes but haven't been able to confirm that. A demo of the problem is here: https://youtu.be/iykA-sMtf3E I didn't realize my mouse was not being captured so here is what is happening - Start on home routes/index.jsx - Click other buttons (the video is laggy such that it looks like multiple buttons are active at this same time, but this is not the case). - When returning to /index the component/ui element is not displayed. (you should see a component with the text /routes/index.jsx. - Refresh the entire page. This results in the component/ui element being displayed. - It is a SolidStart project. - Due to issue #1286 I have the browser cache disabled. - I'm using Firefox Developer Edition but the problem occurs in Chrome as well. - Project was created yesterday using pnpm create solid

"@solidjs/meta": "^0.29.4",
"@solidjs/router": "^0.13.3",
"@solidjs/start": "^1.0.1",
"solid-js": "^1.8.17",
"vinxi": "^0.3.11"

"@solidjs/meta": "^0.29.4",
"@solidjs/router": "^0.13.3",
"@solidjs/start": "^1.0.1",
"solid-js": "^1.8.17",
"vinxi": "^0.3.11"

4 replies

SSolidJS

•Created by Carl (klequis) on 6/4/2024 in #support

Routing and using special characters with <FileRoutes>

When using <FileRoutes> I that both: - routes/[login, register].tsx multiple routes to one handler - routes/*any.tsx wildcard routes Work as expected. However, my file naming eduction dates back to Windows in the 1990's when such names would not have worked (or that is how I remember things). I'm wondering if anyone can tell me the advisability of using these file names and related routes when deploying a SolidStart app. Will names with [], , and/or * work reliably or, if I wanted to use this router features, should I use component or config routing instead.

4 replies

SSolidJS

•Created by Carl (klequis) on 5/20/2024 in #support

OptionalParams in route not working

I'm not getting the expected result using optional params - routes -- users ---- [[id]].tsx ---- index.tsx -- [...404].tsx url: http://localhost:3000/users/1/2 [[id]].tsx

export default function UsersOptionalParams() {
  return (
    <div class="component">
      <p class="file-name">routes/users/[[id]].jsx</p>
    </div>
  );
}

export default function UsersOptionalParams() {
  return (
    <div class="component">
      <p class="file-name">routes/users/[[id]].jsx</p>
    </div>
  );
}

It is routing to [...404]

9 replies

SSolidJS

•Created by Carl (klequis) on 3/11/2024 in #support

How to use load property of <Route>

I haven't been able to figure out how to use <Route>'s load function and haven't found a complete example. One property of props in Person has the data from the fetch but it is still a promise. I'm not sure if it should be and if so, what to do with it. index.jsx

import { lazy } from "solid-js";
import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";
import { loadPerson } from "./route.data";

const Person = lazy(() => import("./pages/Person"))
const Home = lazy(() => import("./pages/Home"))

render(() => (
  <Router>
    <Route path="/" component={Home} />
    <Route
      path="/person"
      load={loadPerson}
      component={Person}
    />
      
  </Router>
), document.getElementById("root"));

import { lazy } from "solid-js";
import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";
import { loadPerson } from "./route.data";

const Person = lazy(() => import("./pages/Person"))
const Home = lazy(() => import("./pages/Home"))

render(() => (
  <Router>
    <Route path="/" component={Home} />
    <Route
      path="/person"
      load={loadPerson}
      component={Person}
    />
      
  </Router>
), document.getElementById("root"));

route.data.js

import { cache } from "@solidjs/router";

async function fetchPerson() {
  const a = await fetch(`https://swapi.tech/api/people/1/`);
  const b = await a.json();
  console.log("b", b);
  return b;
}

export const loadPerson = cache(async () => {
  const [person] = createResource(() => "", fetchPerson);
  return person;
}, "getUserKey");

import { cache } from "@solidjs/router";

async function fetchPerson() {
  const a = await fetch(`https://swapi.tech/api/people/1/`);
  const b = await a.json();
  console.log("b", b);
  return b;
}

export const loadPerson = cache(async () => {
  const [person] = createResource(() => "", fetchPerson);
  return person;
}, "getUserKey");

Person.jsx

import { createSignal, createResource } from "solid-js";

export default function Person(props) {
  // do I use createResource again?
  const [user] = createResource("", peops.data); // doesn't work

  return (
    <>
      <input
        type="number"
        min="1"
        placeholder="Enter Numeric Id"
        onInput={(e) => setUserId(e.currentTarget.value)}
      />
      <span>{user.loading && "Loading..."}</span>
      <div>
        <pre>{JSON.stringify(user(), null, 2)}</pre>
      </div>
    </>
  );
};

import { createSignal, createResource } from "solid-js";

export default function Person(props) {
  // do I use createResource again?
  const [user] = createResource("", peops.data); // doesn't work

  return (
    <>
      <input
        type="number"
        min="1"
        placeholder="Enter Numeric Id"
        onInput={(e) => setUserId(e.currentTarget.value)}
      />
      <span>{user.loading && "Loading..."}</span>
      <div>
        <pre>{JSON.stringify(user(), null, 2)}</pre>
      </div>
    </>
  );
};

15 replies

Gaming

Programming