SolidJS路由器不渲染
我已经搜索了很多,找不到答案。在我的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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我为此努力了一段时间,并意识到该应用程序需要通过
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
indev
environment should work so if it is not working indev
environment I would just check that the module is being resolved correctly.根组件应包裹在
路由器
组件中。The root component should be wrapped in
Router
component.