How to use SolidJS Routes in Astro?
I try to use solidjs route in astro project but it does not show anything. This test 1 and 2 code not give any outputs.
Test 1:
index.astro
--- import Router from "./Router.astro"; --- <Router />Router.astro
--- import { render } from "solid-js/web"; import { Router, Route } from "@solidjs/router"; import Home from "./Home.astro"; import About from "./About.astro"; --- <Router> <Route path="/" component={Home} /> <Route path="/about" component={About} /> </Router>Home.astro
<section> <h1>Home Page</h1> <p>This is the home page.</p> </section>About.astro
<section> <h1>About Page</h1> <p>This is the about page.</p> </section>Test 2: index.astro
--- import Layout from "../../layouts/Layout2.astro"; import Route from "./route.jsx"; --- <Layout title="Welcome to Astro."> <div id="app"></div> <h1>Hello</h1> <Route client:only="solid-js" /> </Layout>route.jsx
import { render } from "solid-js/web"; import { Router } from "@solidjs/router"; import App from "./App"; export default function Counter() { { render( () => ( <Router> <App /> </Router> ), document.getElementById("app") ); } return <></>; }App.jsx
import { Routes, Route } from "@solidjs/router"; import Home from "./pages/Home"; import Users from "./pages/Users"; export default function App() { return ( <> <h1>My Site with Lots of Pages</h1> <Routes> <Route path="/users" component={Users} /> <Route path="/" component={Home} /> <Route path="/about" element={<div>This site was made with Solid</div>} /> </Routes> </> ); }Home.jsx and Users.jsx
export default function Home() { return <div>Page</div>; } export default function Users() { return <div>Page</div>; }
12 Replies
Hi im also working on this too, trying to make SSR solid from astro
The problem is astro is MPA, which is impossible to do smooth transition between pages
In my try, I create an [...page].astro inside pages folder then add the SPA app inside the body
I'm trying to figure out how to implement the rest too
<:Worry_Think:903908042016428062>
hmm yeah me too
Any help?
Still working on it, been researching for a while, and I found out that data in astro can only be flown into the solid spa island by passing as a props
if you're interested, here's my repo, it would be nice if we can do some collab
https://github.com/TaQuanMinhLong/astro-solid
GitHub
GitHub - TaQuanMinhLong/astro-solid: Solidjs powered by server side...
Solidjs powered by server side rendering with Astro - GitHub - TaQuanMinhLong/astro-solid: Solidjs powered by server side rendering with Astro
thank you
anybody solve this issue?
Just need to be aware that astro is the backend and solidjs is the frontend, so client side routing is not related to astro multi page routing, since what astro does is a full render, while solidjs clientside routing is Dom manipulation
Btw that's now how astro work,
For your 1st test, the .astro component can't be used as the component of the <Route>
For your 2nd test, you don't need to put the
<div id="app"> since astro already made an <astro-island> tag for the <Route client:only> if you want the app to render in the div, you must have external script that's not astro generated to render the app on the div for you, and to be honest, your Route component now works as an independent island so it couldn't communicate with your app rendered inside the div with id appWhat is final conclusion? are there no posible way ?
Create a [...page].astro in pages folder to receive any request, then pass the Url pathname to the router of the App
Check my GitHub link
The router then uses the URL to render the match route
then will page refresh?
No, the server only does the full render once, then after that is the stage for client routing
That is cool. I will check your repo. Did you try production output using npm run build?
I did, it worked fine but rn im just testing around