SolidJS Router路由内容未加载问题求助

问题描述 #

配置SolidJS Router后，页面仅显示NavBar组件，HeroPage等页面组件无法加载，相关代码如下：

index.tsx（路由配置） #

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!);

App组件 #

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

import NavBar from './components/NavBar';

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

export default App;

HeroPage组件 #

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;

解决思路 #

问题核心是App组件未包含路由出口（Outlet），SolidJS Router需要通过Outlet来渲染匹配到的页面组件，当前App只返回了NavBar，导致路由组件无处渲染。

步骤1：修改App组件，添加Outlet #

从@solidjs/router导入Outlet，并在App的JSX中添加该组件，路由匹配的页面会自动渲染在Outlet的位置：

import type { Component } from 'solid-js';
import { Outlet } from '@solidjs/router'; // 新增导入
import NavBar from './components/NavBar';

const App: Component = () => {
  return (
    <>
      <NavBar />
      <Outlet /> {/* 添加路由出口 */}
    </>
  );
};

export default App;

步骤2：（可选）优化Router配置写法 #

SolidJS Router更推荐将App作为Router的子组件，而非通过root属性传入，修改index.tsx的Router部分：

render(() => (
  <Router>
    <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} />
    {/* 注释的路由保持不变 */}
  </Router>
), root!);

额外检查 #

确保NavBar中的页面跳转使用@solidjs/router提供的<Link>组件，而非原生<a>标签，避免页面刷新：

// NavBar组件示例
import { Link } from '@solidjs/router';

const NavBar = () => {
  return (
    <nav>
      <Link href="/">首页</Link>
      <Link href="/routes">路线</Link>
      {/* 其他导航链接 */}
    </nav>
  );
};

内容的提问来源于stack exchange，提问作者Jordi Cabré