SolidJS•10mo ago

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! 😄

4 Replies

peerreynders•10mo ago

Basically that <nav> has to be passed as the Router root prop.

peerreynders•10mo ago

It's probably clearer if you just look at this: https://stackblitz.com/edit/stackblitz-starters-zmfxxa?file=src%2Fapp.tsx

peerreynders

StackBlitz

solid-router Basic (forked) - StackBlitz

A Solid TypeScript project based on @solidjs/meta, @solidjs/router, solid-js, typescript, vite and vite-plugin-solid

Robert MartinOP•10mo ago

Appreciate the quick response and full working example @peerreynders — thanks so much! Hi again @peerreynders , quick question about this — in the example why are the <a> tags under <MetaProvider>? Wouldn't that inject them into the <head> and not the <body>? This is what I'm going off of: https://docs.solidjs.com/solid-meta/reference/meta/metaprovider but please let me know if I'm misunderstanding.

peerreynders•10mo ago

MetaProvider just anchors the context used by the components supplied by @solidjs/meta that can be used anywhere in the app like <Meta/> and <Title />. In the example the <title>Solid App</title> needs to be removed from the index.html as meta doesn't remove existing tags, it only manages its own. Also <Meta /> may not work exactly as you expect. https://github.com/solidjs/solid-meta/issues/34#issuecomment-1821621091 https://discord.com/channels/722131463138705510/1319379964050538559/1319381531390906491 https://discord.com/channels/722131463138705510/1283876856860377103/1286754986142732298

GitHub

Meta tags with same name attribute but different other attributes...

For example, use the following two tags: <Meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" /> <Meta name="theme-color" m...

Gaming

Programming

Stuck on a simple router setup

Did you find this page helpful?