Can't make Router Work

Hello I've been trying to make react router work. Here's what I have as of now in the index.tsx file

/* @refresh reload */
import './index.css';

import { render } from 'solid-js/web';
import { Route, Router } from '@solidjs/router';




const root = document.getElementById('root');

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
  );
}

render(
  () =><>
  <Router> 
    <Route path={"/"} component={() =><h1>Hello World</h1> }/>
  </Router> 
  </> 
  , root );

/* @refresh reload */
import './index.css';

import { render } from 'solid-js/web';
import { Route, Router } from '@solidjs/router';




const root = document.getElementById('root');

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
  );
}

render(
  () =><>
  <Router> 
    <Route path={"/"} component={() =><h1>Hello World</h1> }/>
  </Router> 
  </> 
  , root );

Here's what I'm getting on the browser

12 Replies

Madaxen86•6mo ago

Just dropping, that you can also use solid-start and disable SSR in the config. It will then build a SPA. The router is setup already for you. pnpm create solid The Router has a root prop where need to add the children:

   <Router
      root={(props) => (
        <>
          <Suspense>{props.children}</Suspense>
        </>
      )}
    >
   //....

   <Router
      root={(props) => (
        <>
          <Suspense>{props.children}</Suspense>
        </>
      )}
    >
   //....

SpaghettoOP•6mo ago

I'm not interested in using solid start though, just solid with some routing

Hussein•6mo ago

that code looks like it should work are you on "/" in your browser?

Carl (klequis)•6mo ago

That code works for me.

SpaghettoOP•6mo ago

Yes, I'm at this

SpaghettoOP•6mo ago

I've also tried this

SpaghettoOP•6mo ago

Carl (klequis)•6mo ago

Did you look in the browsers dev console for an error?

Madaxen86•6mo ago

This does work: https://stackblitz.com/edit/solidjs-templates-yat3zp?file=src%2Findex.tsx Maybe you need to update the depenencies?

SpaghettoOP•6mo ago

I noticed I had downgraded my nodejs for some reason, so I think this is the actual solution, thank you

saturday•4mo ago

Is Route have to be directly inside Router ?

Gaming

Programming

Can't make Router Work

Did you find this page helpful?