SolidJS路由器不渲染

发布于 2025-02-12 20:20:34 字数 986 浏览 0 评论 0原文

我已经搜索了很多,找不到答案。在我的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>
  )
}

组件操作时的一切看起来都还不错,如果我在第一个路线中称此组件(如Bellow IT工作):

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

I already searched a lot and could not find an answer. In my SolidJs app, the second route is not redered in root element:

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 looks OK at component Operation and if I call this component in first route like bellow it work:

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

彡翼 2025-02-19 20:20:34

我为此努力了一段时间,并意识到该应用程序需要通过routes来引用routs

如果您查看此 docs ,,它提到这些标签包含活动类,该类似乎用于告诉应用程序实际上在构建时间上捆绑此组件,否则默认情况下它不是 包括。

因此,如果您将&lt; a href =“/operations”&gt; operations&lt;/a&gt;在主页中的某个地方(例如navbar),则该页面/组件应捆绑部署。

默认情况下,尽管路由中的所有路由 dev环境中的环境都应起作用,因此,如果它在dev环境中不起作用,我只会检查模块是否是正确解决。

I struggled with this for a while and realised that the application needs to make reference to the Routes by means of an <A> tag.

If you look at this part of the docs, it mentions that these tags include an active class which seems to be used to tell the application to actually bundle this component on build time otherwise by default it is not included.

So if you put <A href="/operations">Operations</A> somewhere in your homepage like a Navbar, that page/component should bundle in on deployment.

By default though all routes in Routes in dev environment should work so if it is not working in dev environment I would just check that the module is being resolved correctly.

只为一人 2025-02-19 20:20:34

根组件应包裹在路由器组件中。

The root component should be wrapped in Router component.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文