S
SolidJS•2d ago
seL3cT

Solid routing

so i have been trying out solid and i keep having some issues with the router, one of which is the routes tag which i believe is in the older versions but i'm using the newer one and dont really wanna downgrade... so this is my code: index.jsx: 
import { render } from 'solid-js/web'
import { Router } from '@solidjs/router'
import './styles/index.css'
import App from './App.jsx'

const root = document.getElementById('root')

render(() => (
        <Router>
                <App />
        </Router>

), root)`
import { render } from 'solid-js/web'
import { Router } from '@solidjs/router'
import './styles/index.css'
import App from './App.jsx'

const root = document.getElementById('root')

render(() => (
        <Router>
                <App />
        </Router>

), root)`
import { createSignal } from 'solid-js'
import solidLogo from './assets/solid.svg'
import viteLogo from '/vite.svg'
import './styles/App.css'
import Home from './pages/home'
import Navbar from './components/navbar'
// import Productie from './pages/productie'
// import Over from './pages/over'
// import Historiek from './pages/historiek'
// import Contact from './pages/contact'
import { Router, Route } from "@solidjs/router";


function App() {

  return (
    <>
        <Navbar /> 

        <Route path="/" component={Home} />
        {/* <Route path="/productie" component={Productie} /> 
        <Route path="/over_ons" component={Over} /> 
        <Route path="/historiek" component={Historiek} /> 
        <Route path="/contact" component={Contact} /> */}
    </>
  )
}

export default App
import { createSignal } from 'solid-js'
import solidLogo from './assets/solid.svg'
import viteLogo from '/vite.svg'
import './styles/App.css'
import Home from './pages/home'
import Navbar from './components/navbar'
// import Productie from './pages/productie'
// import Over from './pages/over'
// import Historiek from './pages/historiek'
// import Contact from './pages/contact'
import { Router, Route } from "@solidjs/router";


function App() {

  return (
    <>
        <Navbar /> 

        <Route path="/" component={Home} />
        {/* <Route path="/productie" component={Productie} /> 
        <Route path="/over_ons" component={Over} /> 
        <Route path="/historiek" component={Historiek} /> 
        <Route path="/contact" component={Contact} /> */}
    </>
  )
}

export default App
please help i keep getting this error: utils.js?v=22cc6010:29 Uncaught Error: <A> and 'use' router primitives can be only used inside a Route.
7 Replies
oke
oke•2d ago
What is in your Navbar ?
seL3cT
seL3cTOP•2d ago
import { A } from "@solidjs/router";

function Navbar () {
    return (
        <nav>
            <ul>
                <li><A href="/">Home</A></li>
                <li><A href="/productie">Huidige Productie</A></li>
                <li><A href="/over_ons">Over Ons</A></li>
                <li><A href="/historiek">Historiek</A></li>
                <li><A href="/contact">Contact</A></li>
                <li>
                    <a href="https://instagram.com" target="_blank">
                        <i class="fa-brands fa-instagram"></i>
                    </a>
                    <a href="https://facebook.com" target="_blank">
                        <i class="fa-brands fa-facebook"></i>
                    </a>
                </li>
            </ul>
        </nav>
    )
}

export default Navbar
import { A } from "@solidjs/router";

function Navbar () {
    return (
        <nav>
            <ul>
                <li><A href="/">Home</A></li>
                <li><A href="/productie">Huidige Productie</A></li>
                <li><A href="/over_ons">Over Ons</A></li>
                <li><A href="/historiek">Historiek</A></li>
                <li><A href="/contact">Contact</A></li>
                <li>
                    <a href="https://instagram.com" target="_blank">
                        <i class="fa-brands fa-instagram"></i>
                    </a>
                    <a href="https://facebook.com" target="_blank">
                        <i class="fa-brands fa-facebook"></i>
                    </a>
                </li>
            </ul>
        </nav>
    )
}

export default Navbar
oke
oke•2d ago
That's the error. Your Navbar uses A A should only be used in a Route element
seL3cT
seL3cTOP•2d ago
yes i get that but i want to have client side rendering is there any fix for it my english is not the best could you please tell me where i should put my navbar?
oke
oke•2d ago
When you want a component to appear on every page, you should think of Layout and/or nested routing. You can use a Layout root like this example here to put your Navbar onto every page https://docs.solidjs.com/solid-router/concepts/layouts (i.e. put your Navbar in a Layout component)
peerreynders
peerreynders•2d ago
Perhaps this will give you a sense of how to organize things: 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
seL3cT
seL3cTOP•2d ago
Thanks, both of these sources helped i really appreciate the help

Did you find this page helpful?