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•4mo 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•4mo ago

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

Hussein•4mo ago

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

Carl (klequis)•4mo ago

That code works for me.

SpaghettoOP•4mo ago

Yes, I'm at this

SpaghettoOP•4mo ago

I've also tried this

SpaghettoOP•4mo ago

Carl (klequis)•4mo ago

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

Madaxen86•4mo ago

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

SpaghettoOP•4mo ago

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

saturday•2mo ago

Is Route have to be directly inside Router ?

Gaming

Programming

Can't make Router Work

Did you find this page helpful?