基于get参数的SolidJS组件渲染

Question

我有一个简单的SolidJS组件：

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

现在，由于我希望构建一个包含许多页面的web应用程序，并且我希望在所有页面上保持页眉、页脚、导航等内容相同，所以我认为我可以根据get参数定制PageContent显示的内容，比如：https://my-app.com?content=home或...?content=customers，.

为了保持思想清晰，我想为单独文件夹(如：content/Home.tsx、content/Customers.tsx等)中的get参数的每个可能值(即，每个页面)定义一个组件。

我是否可以根据get参数(带有内容支柱)在PageContent中返回适当的组件？还是有更好的方法来做我想做的事？

我是个新手，习惯于使用基于PHP的网站，这就是我为什么想到get参数的原因(回想一下index.php?page=)。

谢谢

(我尝试搜索返回的<props.content></props.content>，但没有成功。)

Answer 1

使用像solid-js路由器这样的路由器库的最好方法。SolidJS路由器允许您根据要求根据浏览器中的URL更改视图。我们使用path而不是get参数来匹配要显示的页面或组件的请求，但是逻辑完全取决于您是否使用查询参数或路径或任何其他基于请求的值。它支持通配符路由来覆盖以前不匹配的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>
  </>
}

注意:目前SolidJS游乐场不支持solid-js路由器，您需要使用codesandbox或设置您自己的本地环境。