Solidjs路由器不渲染

Question

我已经找了很多，找不到答案。在我的SolidJs应用程序中，第二个路由没有在根元素中被读取:

import { Routes, Route, useLocation } from "solid-app-router"
import { useNavigate } from 'solid-app-router';
const Login = lazy(() => import("./pages/login"));
const Operation = lazy(() => import("./pages/operation"));
export default function App() {
const navigate = useNavigate();
const location = useLocation();
onMount(() => {
const token = localStorage.getItem('token');
if (!token && location.pathname !== '/') {
navigate("/", { replace: true });
}
if (token && location.pathname === '/') {
navigate("/operations", { replace: true });
}
});
return (
<Routes>
<Route path='/' component={Login} />
<Route path='/operations' component={Operation} />
</Routes>
)
}

组件操作看起来一切正常，如果我在第一条路由中像下面这样调用这个组件，它会工作:

<Route path='/' component={Operation} />

Answer 1

我为此挣扎了一段时间，并意识到应用程序需要通过<A>标记来引用Routes。

如果你看一下文档的这一部分，它提到这些标签包括一个active类，它似乎是用来告诉应用程序在构建时实际捆绑这个组件，否则默认情况下它不包括。

所以如果你把<A href="/operations">Operations</A>放在你的主页的某个地方，像导航栏，该页面/组件应该捆绑在部署。

默认情况下，虽然dev环境中的Routes中的所有路由都应该工作，所以如果它在dev环境中不工作，我会检查模块是否被正确解析。

Answer 2

根组件应该被Router组件包裹。