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>
  )
}

Everything it looks ok at component Operation and if i call this component in first route like bellow it work:

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

Answer 1

根组件应该包装在Router组件中。

Answer 2

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

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

因此，如果您像Navbar一样将<A href="/operations">Operations</A>放在主页的某个位置，那么页面/组件应该在部署时捆绑在一起。

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