SolidJS•3mo 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•3mo ago

Solid router has preload for this use case

HusseinOP•3mo 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•3mo ago

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

HusseinOP•3mo 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•3mo ago

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

HusseinOP•3mo 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•3mo 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

HusseinOP•3mo 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•3mo ago

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

HusseinOP•3mo 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•3mo ago

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

HusseinOP•3mo ago

i will try this

Brendonovich•3mo 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

HusseinOP•3mo ago

interesting

Gaming

Programming

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