solid-js - Solid App Router 元素不是渲染组件 - 对象对象

Question

刚开始使用SolidJS和固体路由器，已经卡在路线上，没有渲染“元素”内的组件。相反，它显示“[object Object][object Object]”

参见: https://codesandbox.io/s/solidjs-shopping-cart-wj5zvr?file=/src/App.jsx

下面是代码:

import { Router, 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>
        <Route path="/" element={<Home />} />
        <Route path="/cart" element={<Cart />} />
      </Router>
      <footer>footer..</footer>
    </>
  );
}

export default App;

Answer 1

尝试使用<Route path="/" component={Home} />相反。

这也使得将来转换为惰性路由(用于代码分割)变得很浪费......

<Route path="/" component={lazy(() => import("./home"))} />

编辑:我查看了你的codesandbox，发现已经有了 <Router>在index.jsx那么你想要 App.jsx 中的内容实际上是<Routes>...<Routes> .

      <Routes>
        <Route path="/" component={Home} />
        <Route path="/cart" component={Cart} />
      </Routes>