CODEWITHSUNDEEP
solid-js
Niccolò Cavallini
Niccolò Cavallini

Reputation: 51

Render SolidJS component based on get parameter

I have a simple SolidJS component:

export const PageContent: Component<{content: string}> = (props) => {
    
}

Now, since I would like to build a web app with many pages, and I would like to keep things like header, footer, nav, etc. the same across all pages, I thought that I could customize what it is displayed by PageContent based on a get parameter, like: https://my-app.com?content=home or ...?content=customers, ...

To keep thinks clean, I'd like to define a component for each possible value of the get parameter (i.e., for every page) in a separate folder (like: content/Home.tsx, content/Customers.tsx, etc.).

Can I return the appropriate component in PageContent based on the get parameter (with the content prop)? Or there is a better way to do what I want to do?

I'm new to Solid and used to work with PHP-based websites, this is why the idea of the get parameter came to my mind (recalling index.php?page=).

Thanks

(I tried searching returning <props.content></props.content> but it didn't work.)

Upvotes: 1

Views: 797

Answers (1)

snnsnn
snnsnn

Reputation: 13698

Best way to go using a router library like solid-js router. SolidJS Router lets you change your view based on the URL in the browser like you asked for. We use path instead of get parameters to match request to the page or component to display, however the logic is totally up to you weather to use query parameters or paths or any other request based value. It support wildcard routes to blanket match previously unmatched urls.

https://github.com/solidjs/solid-router

import { Routes, Route } from "@solidjs/router"

const Home = () => {
  return (<div>Home</div>);
};

const Users = () => {
  return (<div>Users</div>);
};

export default function App() {
  return <>
    <h1>My 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>
  </>
}

Note: Currently SolidJS Playground does not support solid-js router, you need to use codesandbox or set your own local environment.

Upvotes: 0

Related Questions