Carl (klequis)
Carl (klequis)
PostsComments
SSolidJS
Created by Spaghetto on 10/8/2024 in #support
Can't make Router Work
Did you look in the browsers dev console for an error?
13 replies
SSolidJS
Created by Spaghetto on 10/8/2024 in #support
Can't make Router Work
That code works for me.
13 replies
SSolidJS
Created by laksh on 7/1/2024 in #support
I have a use case for createResource vs normal async await api call.
current router version is 0.13.6. I don't know the exact version createAsync was introduced but it was in 0.10.x which was a significant change. The doc has all be updated so maybe consider upgrading if you haven't already.
18 replies
SSolidJS
Created by Carl (klequis) on 6/17/2024 in #support
Routing: Component/UI Element not rendered
I'll open an issue for this.
4 replies
SSolidJS
Created by Carl (klequis) on 6/17/2024 in #support
Routing: Component/UI Element not rendered
Additionally, - sometimes rather than the component not rendering it routes to routes/[...404].jsx - I switched to Chrome and am having the same issue.
4 replies
SSolidJS
Created by Carl (klequis) on 6/17/2024 in #support
Routing: Component/UI Element not rendered
Demo repo: https://github.com/klequis/UIElementNotDisplaying
4 replies
SSolidJS
Created by Carl (klequis) on 6/4/2024 in #support
Routing and using special characters with <FileRoutes>
I spend 10 years making Windows apps and don't miss the footgun even a little bit. 🙂
4 replies
SSolidJS
Created by Carl (klequis) on 6/4/2024 in #support
Routing and using special characters with <FileRoutes>
The question relates to a SolidStart routing tutorial I'm writing so no actual deployment. I noticed that the Solid Router doc has this patterns documented but in the <FileRoutes> doc they are not. So the question is me questioning if I should include these patterns in the tutorial or not.
4 replies
SSolidJS
Created by Carl (klequis) on 5/20/2024 in #support
OptionalParams in route not working
Logical. But in that case the doc seems to be wrong because in testing that it matches /users and /users/1 but not /users/1.2. I'll ask the cocs team.
9 replies
SSolidJS
Created by Carl (klequis) on 5/20/2024 in #support
OptionalParams in route not working
?
9 replies
SSolidJS
Created by Carl (klequis) on 5/20/2024 in #support
OptionalParams in route not working
Then I am misunderstanding https://docs.solidjs.com/solid-start/building-your-application/routing#optional-parameter
9 replies
SSolidJS
Created by Carl (klequis) on 5/20/2024 in #support
OptionalParams in route not working
codesandbox example: https://codesandbox.io/p/github/klequis/solid-routing-optional-params/main?import=true
9 replies
SSolidJS
Created by MikeM42 on 3/14/2024 in #support
Route definition within a component
.zip files can be troublesome. Can you put an example on Stackblitz or Codesandbox?
2 replies
SSolidJS
Created by Carl (klequis) on 3/11/2024 in #support
How to use load property of <Route>
I was searching far and wide for examples of using the load function and found next to nothing. Perhaps it was never very popular.
15 replies
SSolidJS
Created by Carl (klequis) on 3/11/2024 in #support
How to use load property of <Route>
I just noticed that your solution using createResource in the load function is listed in the Migration from v0.9.x doc and it suggests that was the way to do it before 10.x
15 replies
SSolidJS
Created by Carl (klequis) on 3/11/2024 in #support
How to use load property of <Route>
I have since created two examples. I couldn't get them working on StackBlitz so here they are in github: https://github.com/klequis/solid-router-load-functions I find your first example (solidjs-templates-h7n8dj) interesting in the way it differs from my example02 in the above repo. You - modified the response in fetchPerson returning only name, - then use createResource in loadPerson. - but don't need createAsync in <Person> I did neither but did need createAsync in [id].jsx (formally Person.jsx).
I also followed "A common pattern" example from this section of the router README Thank you for your efforts. They have been very educational.
15 replies
SSolidJS
Created by Carl (klequis) on 3/11/2024 in #support
How to use load property of <Route>
Helps improve my understanding. Thanks!
15 replies
SSolidJS
Created by Carl (klequis) on 3/11/2024 in #support
How to use load property of <Route>
This works but const person = createAsync(() => getPerson(props.params.id)); in Person seems to be redundant. Is it correct? 
import { lazy } from "solid-js";
import { render } from "solid-js/web";
import { Router, Route, createAsync } from "@solidjs/router";
import { cache } from "@solidjs/router";

const getPerson = cache(async (id) => {
  return (await fetch(`https://swapi.tech/api/people/${id}/`)).json()
}, "getPerson")

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

function loadPerson({params, location}) {
  void getPerson(params.id)
}

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

function Person(props) {
  const person = createAsync(() => getPerson(props.params.id));
  
  return (
    <>
      <h1>Person</h1>
      <div>
        <pre>{JSON.stringify(person(), null, 2)}</pre>
      </div>
    </>
  )
}
import { lazy } from "solid-js";
import { render } from "solid-js/web";
import { Router, Route, createAsync } from "@solidjs/router";
import { cache } from "@solidjs/router";

const getPerson = cache(async (id) => {
  return (await fetch(`https://swapi.tech/api/people/${id}/`)).json()
}, "getPerson")

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

function loadPerson({params, location}) {
  void getPerson(params.id)
}

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

function Person(props) {
  const person = createAsync(() => getPerson(props.params.id));
  
  return (
    <>
      <h1>Person</h1>
      <div>
        <pre>{JSON.stringify(person(), null, 2)}</pre>
      </div>
    </>
  )
}
15 replies