Robert Martin
Robert Martin
PostsComments
SSolidJS
Created by Robert Martin on 1/30/2025 in #support
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 -->
<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!
);
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.
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! 😄
6 replies