SolidJS 未捕获错误：<A> 和“使用”路由器原语只能在路由内部使用

Question

我的solidjs (Vanilla JS) 代码遇到了一些问题。我尝试建立一个小型的三页网站，只是为了打印一些信息。我使用 vitejs、solidjs 和 tailwindcss。我能够构建相关部分、一些反应性和我想要的三个站点。一切都靠它自己运作良好。我无法管理的是路由。

我的index.html 寻找App.jsx。在 App.jsx 中，我执行相关的导入、加载和显示我的组件并渲染所有内容。它看起来像这样：

import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";
import "./app.css";
const root = document.getElementById("root");
import Header from "./components/Header";
import Footer from "./components/Footer";
import Home from "./pages/Home";
import Impressum from "./pages/Impressum";
import NotFound from "./pages/404";

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

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

标题组件中是一个带有链接的导航栏。我还从solidjs/router 导入A。它看起来像这样（我没有显示工作正常的样式和其他功能）：

import { createSignal, onCleanup, onMount, createEffect } from "solid-js";
import { A } from "@solidjs/router";
//import LinkList from "./LinkList";
import { Collapse, Dropdown, Ripple, initTWE } from "tw-elements";
import logo from "../assets/logo.svg";

[...]

<nav>
 <ul>
  <li><A href ="/">Home</A></li>
  <li><A href ="/impressum">Impressum</A></li>
 </ul>
</nav>

运行开发服务器出现以下错误：

未捕获错误：“使用”路由器原语只能在路由内部使用。

我尝试了不同的包装器，询问了 chatGPT，并且已经在 Google 上搜索了几个小时。我不知道出了什么问题。我对编程的兴趣并不长。而且英语不是我的母语...

Answer 1

正如警告所述，您可以使用

A

元素或依赖 Route 组件下的路由器 API 的其他元素。

问题是，您通过

A

组件在

Router

组件的正下方有一个

Header

组件，但它应该首先被

Route

包裹。

这个想法是导航项始终与路线相关联。

import { A, Route, Router } from '@solidjs/router';
import { render } from 'solid-js/web';

function App() {  
  const Home = () => (
    <div>
      <ul>
        <li><A href='/blog'>Blog</A></li>
        <li><A href='/users'>Users</A></li>
      </ul>
      <div>This is home page!</div>
    </div>
  );

  const Users = () => <div>Users</div>;
  const Blog = () => <div>Blog</div>;
  const NotFound = () => <div>NotFound</div>;

  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/blog" component={Blog} />
      <Route path="*404" component={NotFound} />
    </Router>
  );
}

render(() => <App />, document.body);