CODEWITHSUNDEEP
solid-js
Michael Soriano
Michael Soriano

Reputation: 287

Solid App Router element not rendering component - Object Object

Just started using SolidJS and solid router, already stuck at the route not rendering the component inside "element". Instead it's showing "[object Object][object Object]"

enter image description here

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

Below is the code:

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;

Upvotes: 2

Views: 1011

Answers (1)

Brendan
Brendan

Reputation: 760

Try going with <Route path="/" component={Home} /> instead.

That also makes it wasy to convert to lazy routes (for code splitting) in the future...

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

EDIT: I took a look at your codesandbox and noticed there is already <Router> in index.jsx so what you want in App.jsx is actually <Routes>...<Routes>.

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

Upvotes: 5

Related Questions