[Content]: Confused about how to use Router navigation

[bertday]

📚 Subject area/topic

/solid-router/concepts/navigation.mdx

📋 Page(s) affected (or suggested, for new content)

https://docs.solidjs.com/solid-router/concepts/navigation

📋 Description of content that is out-of-date or incorrect

I'm learning how to use Solid Router by stepping through the Learn materials 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 -->

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, or point me to a working example of loading routes via links? I'm happy to submit a PR to make the docs a bit clearer to newbies like myself 😄

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

No response

[bertday]

I also asked this on Discord here — I'll report back and close this out if I get an answer there first! 😄

[bertday]

Someone kindly answered my question over on Discord about how to get started with Router. They created this StackBlitz example with the setup I was going for. Minus the imports and exports, it looks like this:

function App() {
  return (
    <Router
      root={(props) => {
        return (
          <MetaProvider>
            <Title>Solid - Router</Title>
            <a href="/">Index</a>
            <a href="/about">About</a>
            <Suspense>{props.children}</Suspense>
          </MetaProvider>
        );
      }}
    >
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/admin" component={Admin} />
      <Route path="*404" component={NotFound} />
    </Router>
  );
}

To be honest I'm still confused by how this works, especially MetaProvider and why it would contain anchor tags, but that may be something to keep chatting about on Discord.

In terms of documentation, I think it would be really helpful to have a fully working example like this at the very top of the Router docs, like a quickstart. Just my two cents as a newbie! 😄