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

11 Replies

Madaxen86•2mo 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•2mo ago

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

Hussein•2mo ago

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

Carl (klequis)•2mo ago

That code works for me.

SpaghettoOP•2mo ago

Yes, I'm at this

SpaghettoOP•2mo ago

I've also tried this

SpaghettoOP•2mo ago

Carl (klequis)•2mo ago

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

Madaxen86•2mo ago

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

SpaghettoOP•2mo ago

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

Gaming

Programming

Can't make Router Work