S
SolidJS•2mo ago
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 -->
<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
peerreynders•2mo ago
Basically that <nav> has to be passed as the Router root prop.
peerreynders
peerreynders•2mo 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 Martin
Robert MartinOP•2mo 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
peerreynders•2mo 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...

Did you find this page helpful?