Solid App Router element配置组件不渲染 显示[object Object]

异常表现 #

路由配置完成后目标组件无法正常渲染，页面输出[object Object][object Object]文本：

触发原因 #

存在两处API使用错误：

• 路由定义未包裹在<Routes>组件内：<Router>仅负责注入路由上下文，路由匹配、内容渲染逻辑由<Routes>组件承载，直接在Router下放置Route无法正常工作。
• 误用React Router的element传参方式：solid-app-router 不支持element属性，传入的JSX对象会被默认序列化为字符串，最终渲染为[object Object]文本。

修复方案 #

1. 从依赖包中补充导入Routes组件
2. 将所有Route节点包裹在<Routes>标签内部
3. 移除element属性，改用component属性传入组件引用（直接传函数本身，不要加尖括号调用）

完整修复后代码如下：

import { Router, Routes, Route } from "solid-app-router";

function Home() {
  return <h1>Home page here...</h1>;
}
function Cart() {
  return <h1>Cart page here...</h1>;
}

function App() {
  return (
    <>
      <header>header...</header>
      <Router>
        <Routes>
          <Route path="/" component={Home} />
          <Route path="/cart" component={Cart} />
        </Routes>
      </Router>
      <footer>footer..</footer>
    </>
  );
}

export default App;

如需渲染带自定义传参的JSX片段，可直接将JSX作为Route的子元素传入，例：<Route path="/cart"><Cart theme="dark" /></Route>

内容的提问来源于stack exchange，提问作者Michael Soriano