SolidJS•6d ago

is there a way to start data fetching before component rendering?

react router runs the loader before the component. thus making things like redirects easier. is there a way to do this with @solidjs/router?

export const routes = createRoutesFromElements(
  <>
    <Route
      loader={() => Response.redirect("/other")}
      path="/"
      element={<Home />}
    />
    <Route path="/other" element={<Other />} />
  </>
);

export const routes = createRoutesFromElements(
  <>
    <Route
      loader={() => Response.redirect("/other")}
      path="/"
      element={<Home />}
    />
    <Route path="/other" element={<Other />} />
  </>
);

14 Replies

Brendonovich•6d ago

Solid router has preload for this use case

Hussein•6d ago

import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";

function Home() {
  return <h1>Home</h1>;
}

function App() {
  return (
    <Router>
      <Route
        preload={() => Response.redirect("/other")}
        path="/"
        component={Home}
      />
      <Route path="/other" component={Other} />
    </Router>
  );
}

function Other() {
  return <h1>Other</h1>;
}

render(() => <App />, document.getElementById("app"));

import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";

function Home() {
  return <h1>Home</h1>;
}

function App() {
  return (
    <Router>
      <Route
        preload={() => Response.redirect("/other")}
        path="/"
        component={Home}
      />
      <Route path="/other" component={Other} />
    </Router>
  );
}

function Other() {
  return <h1>Other</h1>;
}

render(() => <App />, document.getElementById("app"));

like this? it doesn't work

Brendonovich•6d ago

Use useNavigate in the preload function to do the navigation Returning stuff from preload doesn’t really do anything

Hussein•6d ago

function App() {
  const redirect = useNavigate();
  return (
    <Router>
      <Route preload={() => redirect("/other")} path="/" component={Home} />
      <Route path="/other" component={Other} />
    </Router>
  );
}

function App() {
  const redirect = useNavigate();
  return (
    <Router>
      <Route preload={() => redirect("/other")} path="/" component={Home} />
      <Route path="/other" component={Other} />
    </Router>
  );
}

Uncaught Error: <A> and 'use' router primitives can be only used inside a Route.

Brendonovich•6d ago

I mean like () => useNavigate()(‘/other’)

Hussein•5d ago

import { render } from "solid-js/web";
import { Router, Route, useNavigate } from "@solidjs/router";

function Home() {
  console.log("ran");

  return <h1>Home</h1>;
}

function App() {
  return (
    <Router>
      <Route
        preload={() => useNavigate()("/other")}
        path="/"
        component={Home}
      />
      <Route path="/other" component={Other} />
    </Router>
  );
}

function Other() {
  return (
    <>
      <h1>Other</h1>
      <a href="/">Home</a>
    </>
  );
}

render(() => <App />, document.getElementById("app"));

import { render } from "solid-js/web";
import { Router, Route, useNavigate } from "@solidjs/router";

function Home() {
  console.log("ran");

  return <h1>Home</h1>;
}

function App() {
  return (
    <Router>
      <Route
        preload={() => useNavigate()("/other")}
        path="/"
        component={Home}
      />
      <Route path="/other" component={Other} />
    </Router>
  );
}

function Other() {
  return (
    <>
      <h1>Other</h1>
      <a href="/">Home</a>
    </>
  );
}

render(() => <App />, document.getElementById("app"));

run this and then click on the link in the /other page. console.log("ran"); will trigger when clicking the <a>. is there a way to not run the component at all? @Brendonovich 😢

Brendonovich•5d ago

there's not really a better way really, preload shouldn't be used for this use case in the first place it's for optimisation. putting a <Navigate> in component is more correct

Hussein•5d ago

i don't care what is the way, i just want any way at all to not run the component at all if it redirects

Brendonovich•5d ago

i don't think there's a way to guarantee that

Hussein•5d ago

if you mean perf by optimization, no. i just think its more correct to have this sense of pages and the loaders run before the pages

Brendonovich•5d ago

i don't mean what you're doing is optimisation, i mean that's what preload is for

Hussein•5d ago

i will try this

Brendonovich•5d ago

solid router doesn't have an equivalent to RR's loader since that blocks the route from loading until it's done solid router expects you to define all the actual logic in the component and then apply preload as an optimisation on top

Hussein•5d ago

interesting

Gaming

Programming

is there a way to start data fetching before component rendering?