Рендеринг SolidJS дважды при использовании маршрутизации
Я новичок в SolidJS и заметил, что мое приложение отображается дважды. Я подозреваю, что это связано с тем, как я обрабатываю маршрутизацию. Я создал простой пример, чтобы проиллюстрировать проблему:
app.tsx
import { Suspense } from "solid-js";
import { useAssets } from "solid-js/web";
import { css, renderSheets, type StyleData } from "solid-styled";
import { Router, Route } from "@solidjs/router";
import Home from './routes/index';
import NotFound from "~/routes/[...404]";
function GlobalStyles() {
css`
@global {
* {
transition: all .2s linear;
}
body {
margin: 0;
font-family: 'Montserrat', -apple-system, -system-ui, BlinkMacSystemFont,
'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 16px;
color: #292929FF;
}
a {
margin-right: 1rem;
}
main {
margin: 0 auto;
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
}
.content-wrapper {
width: calc(100vw - 350px);
height: 100%;
display: flex;
flex-direction: column;
}
input {
border: none;
outline: none;
box-shadow: none;
background-color: transparent;
}
}
`;
return null;
}
export default function App() {
return (
<Router>
<Suspense>
<Route path = "/" component = {Home} />
</Suspense>
</Router>
);
}
запись-client.tsx
// @refresh reload
import { render } from "solid-js/web";
import App from "./app";
// @ts-ignore
render(() => <App />, document.getElementById("app"));
запись-server.tsx
// @refresh reload
import { createHandler, StartServer } from "@solidjs/start/server";
export default createHandler(() => (
<StartServer
document = {({ assets, children, scripts }) => (
<html lang = "en">
<head>
<meta charset = "utf-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1" />
<link rel = "icon" href = "/favicon.ico" />
{assets}
</head>
<body>
<div id = "app">{children}</div>
{scripts}
</body>
</html>
)}
/>
));
index.tsx
import { Title } from "@solidjs/meta";
import Sidebar from "~/components/Sidebar";
import Navbar from "~/components/Navbar";
export default function Home() {
return (
<main>
TEST
</main>
);
}
Это показано на веб-странице:
...
<div id = "app"><!--!$e0-0-0-0-0-0-0--><main data-hk = "0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0">TEST</main><!--!$/e0-0-0-0-0-0-0--><main>TEST</main></div>
Как показано в визуализированном выводе, элемент появляется дважды. Что может быть причиной такого дублирования и как его устранить?
Заранее спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это потому, что вы погружаете маршрут в ожидание.
Саспенс по замыслу выполнен дважды. В первый раз необходимо собрать базовые ресурсы, чтобы их можно было приостановить до тех пор, пока эти ресурсы не преобразуются в значение. Под ресурсом мы подразумеваем сигнал ресурса, созданный с помощью функции createResource. Приостановка выполняется во второй раз, когда все базовые ресурсы преобразуются в значение, так что фактические данные визуализируются.
При этом с вашим подходом есть несколько проблем.
Маршрут должен отображаться непосредственно под маршрутизатором. Ресурс должен находиться внутри компонента маршрута. Любой компонент, помещенный в режим ожидания, должен защищаться от неопределенных данных, поскольку изначально ресурс будет неопределенным. Ресурс может выдать ошибку, если он извлекает удаленное значение, поэтому вам следует остерегаться любых возможных ошибок, используя ErrorBoundary.
Возможно, будет нецелесообразно переходить к SolidStart, не изучив основы SolidJ. SolidStart построен на основе SolidJs. Хорошее понимание SolidJS требует от вас знания парадигмы выполнения Solid и основ его API, включая контекст, ресурсы и переходы.
Узнайте больше об API ресурсов и приостановки:
- https://stackoverflow.com/a/74590574/7134134
- https://docs.solidjs.com/reference/comComponents/suspense
- https://docs.solidjs.com/reference/basic-reactivity/create-resource
Это действительно полезно. Большое спасибо.
@Xbel Рад быть полезным. Спасибо и Вам за добрые слова.
Что заставляет вас думать, что вам нужен
<Suspenseтам? см., например npmjs.com/package/@solidjs/router#configure-your-routes