solid js - solidjs router: content not loaded - Stack Overflow

Here my routing configuration:

index.tsx file:

import './index.css';
import { render } from 'solid-js/web';

import App from './App';
import { Router, Route } from '@solidjs/router';
import HeroPage from './pages/HeroPage';
import News from './pages/NewsPage';
import RegistrationPage from './pages/RegistrationPage';
import RaceRoutes from './pages/RoutesPage';
import RaceRules from './pages/RulesPage';

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 root={App}>
    <Route path="/" component={HeroPage} />
    <Route path="/routes" component={RaceRoutes} />
    <Route path="/registrations" component={RegistrationPage} />
    <Route path="/rules" component={RaceRules} />
    <Route path="/news" component={News} />
    {/* <Route path="/edition-2024" component={Edition2024Page} /> */}
    {/* <Route path="/contact" component={ContactPage} /> */}
  </Router>
), root!);

My App component:

import type { Component } from 'solid-js';

import NavBar from './components/NavBar';

const App: Component = () => {
  return (
    <NavBar />
  );
};

export default App;

My HeroPage component:

import type { Component } from 'solid-js';

const HeroPage: Component = () => {
  return (
    <section id="hero" class="bg-cover bg-center h-screen" style="background-image: url('.jpg');">
      <div class="flex items-center justify-center h-full bg-gray-900 bg-opacity-50">
        <div class="text-center text-white">
          <h1 class="text-5xl font-bold mb-4">Cursa de Muntanya</h1>
          <p class="text-xl mb-8">Uneix-te a nosaltres per una experiència inoblidable</p>
          <a href="#inscripcio" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">Inscriu-te Ara</a>
        </div>
      </div>
    </section>
  );
};

export default HeroPage;

I'm only able to see navbar component on top of the page.

No content is loaded. I mean, my hero component is not shown.

Any ideas?

Here my routing configuration:

index.tsx file:

import './index.css';
import { render } from 'solid-js/web';

import App from './App';
import { Router, Route } from '@solidjs/router';
import HeroPage from './pages/HeroPage';
import News from './pages/NewsPage';
import RegistrationPage from './pages/RegistrationPage';
import RaceRoutes from './pages/RoutesPage';
import RaceRules from './pages/RulesPage';

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 root={App}>
    <Route path="/" component={HeroPage} />
    <Route path="/routes" component={RaceRoutes} />
    <Route path="/registrations" component={RegistrationPage} />
    <Route path="/rules" component={RaceRules} />
    <Route path="/news" component={News} />
    {/* <Route path="/edition-2024" component={Edition2024Page} /> */}
    {/* <Route path="/contact" component={ContactPage} /> */}
  </Router>
), root!);

My App component:

import type { Component } from 'solid-js';

import NavBar from './components/NavBar';

const App: Component = () => {
  return (
    <NavBar />
  );
};

export default App;

My HeroPage component:

import type { Component } from 'solid-js';

const HeroPage: Component = () => {
  return (
    <section id="hero" class="bg-cover bg-center h-screen" style="background-image: url('https://example.com/mountain.jpg');">
      <div class="flex items-center justify-center h-full bg-gray-900 bg-opacity-50">
        <div class="text-center text-white">
          <h1 class="text-5xl font-bold mb-4">Cursa de Muntanya</h1>
          <p class="text-xl mb-8">Uneix-te a nosaltres per una experiència inoblidable</p>
          <a href="#inscripcio" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">Inscriu-te Ara</a>
        </div>
      </div>
    </section>
  );
};

export default HeroPage;

I'm only able to see navbar component on top of the page.

No content is loaded. I mean, my hero component is not shown.

Any ideas?

• solid-js

Share Improve this question Follow asked Jan 16 at 13:47 Jordi CabréJordi Cabré 4744 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Your configuration is not correct. The root prop on the Router component should be a layout component, not App. See this answer for details: https://stackoverflow.com/a/79289400/7134134