SolidJSS
SolidJS•12mo ago•
5 replies
Robert Martin

Stuck on a simple router setup

I'm learning how to use Solid Router by stepping through the docs in order. My goal is to build something like this:

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<!-- Home or About component gets loaded here -->


In the docs, the Getting started > Component routing section says to make the root of your app <Router> and then nest <Route>s inside it.

However, just below that in Concepts > Navigation the code snippets have an <App> for a root and don't mention <Router>. So I don't understand where the contents of my app should be in relation to the <Router>, especially layout stuff that is external to the route being loaded.

I tried this:

render(
  () => (
    <>
      <nav>
        <A href="/">Home</A>
        <A href="/about">About</A>
      </nav>
      <Router>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Router>
    </>
  ),
  root!
);


And am getting this error:

Uncaught Error: <A> and 'use' router primitives can be only used inside a Route.


Can anyone help me understand how to achieve this? Thank you very much in advance! 😄
Was this page helpful?