Я новичок в Solid Js и сейчас создаю с его помощью приложение. Я не понимаю, как правильно выполнять условный рендеринг на моих маршрутах. В частности, активация и деактивация маршрутов при входе пользователя в систему.
Моя текущая настройка роутера такая:
export const App = () => {
const [authAccount] = useAuth()
const {user, token} = authAccount.auth
return (
<>
<Router>
<Route path = "/" component = {user ? HomeScreen : LoginScreen} />
<Route path = "/inventory" component = {user ? InventoryScreen : LoginScreen} />
<Route path = "/transaction" component = {user ? TransactionScreen : LoginScreen} />
<Route path = "/settings/" component = {user ? AccountSettingsScreen : LoginScreen} />
<Route path = "/settings/notifications" component = {user ? NotificationSettingsScreen : LoginScreen}/>
<Route path = "/settings/password" component = {user ? PasswordSettingsScreen : LoginScreen} />
<Route path = "/ran" component = {user ? RemindersAndNotificationScreen : LoginScreen} />
<Route path = "/inventory/:itemID" component = {user ? ViewItemScreen : LoginScreen}/>
<Route path = "/inventory/add" component = {user ? AddItemScreen : LoginScreen} />
<Route path = "/inventory/edit/:itemID" component = {user ? EditItemScreen : LoginScreen}/>
<Route path = "/transaction/:transactionID" component = {user ? ViewTransactionScreen : LoginScreen}/>
<Route path = "/transaction/edit/:transactionID" component = {user ? EditTransactionScreen : LoginScreen}/>
<Route path = "/transaction/add/in/:itemID?" component = {user ? TransactionInScreen : LoginScreen} />
<Route path = "/transaction/add/out/:itemID?" component = {user ? TransactionOutScreen : LoginScreen} />
<Route path = "/transaction/add/lent/:itemID?" component = {user ? TransactionLentScreen : LoginScreen} />
<Route path = "/transaction/add/return/:itemID?" component = {user ? TransactionReturnScreen : LoginScreen} />
<Route path = "/login" component = {!user ? LoginScreen : HomeScreen} />
<Route path = "/register" component = {!user ? RegistrationScreen : HomeScreen} />
<Route path = "/fp" component = {!user ? ForgotPasswordScreen : HomeScreen} />
</Router>
</>
)
};
Это приводит к тому, что мои экраны не отображаются должным образом, и я просто не понимаю, как мне это сделать.
Любая помощь и предложения очень ценятся.
Лучше всего выполнить оценку перед рендерингом компонента.
Существуют разные способы достижения условного рендеринга на основе проверки. Наиболее распространенными из них являются редирект и действие.
const getUser = cache(() => {
const user = await api.getCurrentUser()
if (!user) throw redirect("/login");
return user;
})
https://github.com/solidjs/solid-router?tab=readme-ov-file#redirectpath-options
import { action, revalidate, redirect } from "@solidjs/router"
// anywhere
const myAction = action(async (data) => {
await doMutation(data);
// throw a response to do a redirect
throw redirect("/", { revalidate: getUser.keyFor(data.id) });
});
// in component
<form action = {myAction} method = "post" />
//or
<button type = "submit" formaction = {myAction}></button>
https://github.com/solidjs/solid-router?tab=readme-ov-file#action
Примеры взяты из самой библиотеки, их можно проверить по адресу: https://github.com/solidjs/solid-router