SolidJS路由报错：<A>与'use'路由原语仅可在Route内使用

算力阿峰

2026-6-27

问题解决：组件只能在Route内部使用的错误

错误原因

你的Header组件渲染在Router组件外部，而SolidJS路由的<A>组件依赖Router提供的上下文环境，不在这个环境内就会抛出该错误。

解决方案

将Header和Footer放入路由上下文范围内，最规范的方式是使用嵌套路由+布局组件：

创建一个布局组件（比如Layout.jsx），包裹Header、页面出口和Footer：

import Header from "./components/Header";
import Footer from "./components/Footer";
import { Outlet } from "@solidjs/router";

export default function Layout() {
  return (
    <>
      <Header />
      <Outlet /> {/* 这里会渲染匹配的子路由组件 */}
      <Footer />
    </>
  );
}

修改App.jsx中的路由配置，将根路由指向布局组件，并嵌套页面路由：

import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";
import "./app.css";
const root = document.getElementById("root");
import Layout from "./Layout"; // 导入布局组件
import Home from "./pages/Home";
import Impressum from "./pages/Impressum";
import NotFound from "./pages/404";

function App() {
  return (
    <Router>
      {/* 根路由使用布局组件，子路由渲染在Outlet位置 */}
      <Route path="/" component={Layout}>
        <Route path="/" component={Home} />
        <Route path="/impressum" component={Impressum} />
      </Route>
      {/* 404路由使用*匹配所有未定义路径 */}
      <Route path="*" component={NotFound} />
    </Router>
  );
}

render(() => <App />, root);

替代方案（简化版）

如果不需要复杂的布局嵌套，也可以直接将Header和Footer放入Router内部：

function App() {
  return (
    <Router>
      <Header />
      <Route path="/" component={Home} />
      <Route path="/impressum" component={Impressum} />
      <Route path="*" component={NotFound} />
      <Footer />
    </Router>
  );
}