Carrot Rübe
SolidJS routing not working, needs to reload the page.
Whenever I try to go to another page I have to reload the page.
I use Tauri, SolidJS and vite.
sidebar.jsx
App.jsx
index.js
<nav>
<li id="link-library">
<nav>
<A href="/my-library" activeClass="underlined" inactiveClass="default">
<p className="links-texts">My Library</p>
</A>
</nav>
</li>
</nav>
<nav>
<li id="link-library">
<nav>
<A href="/my-library" activeClass="underlined" inactiveClass="default">
<p className="links-texts">My Library</p>
</A>
</nav>
</li>
</nav>
const sidebarRoutes = [
{
path: "/",
component: lazy(() => import("./templates/gamehub-01/Gamehub")),
},
{
path: "/my-library",
component: lazy(() => import("./templates/mylibrary-01/Mylibrary"))
}
]
return (
<div className="app-container">
<div className="main-content">
<div className="searchbar">
<Searchbar />
</div>
<Router>
{sidebarRoutes}
</Router>
</div>
</div>
)
const sidebarRoutes = [
{
path: "/",
component: lazy(() => import("./templates/gamehub-01/Gamehub")),
},
{
path: "/my-library",
component: lazy(() => import("./templates/mylibrary-01/Mylibrary"))
}
]
return (
<div className="app-container">
<div className="main-content">
<div className="searchbar">
<Searchbar />
</div>
<Router>
{sidebarRoutes}
</Router>
</div>
</div>
)
render(() => (
<Router root={App}></Router>
), document.getElementById("root"));
render(() => (
<Router root={App}></Router>
), document.getElementById("root"));
3 replies
Issue with localStorage and signals
Hii sorry to bother y'all but I have been having this problem for 3 days now, so everytime I change the cdg object (changing the gameImage and gameTitle) if I go to dev tools it shows that it changed but later it isn't showing the new gameImage nor gameTitle
I tried passing it down as props or use createComputed, or createMemo but it doesn't seem to even see the change of CDG.
const [currentImage, setCurrentImage] = createSignal('')
const [currentTitle, setCurrentTitle] = createSignal('')
createEffect(() => {
const handleChange = () => {
const gameStorageInfo = localStorage.getItem('CDG');
if (gameStorageInfo) {
try {
const games = JSON.parse(gameStorageInfo);
if (games.length > 0) {
const firstGame = games[0];
setCurrentImage(firstGame.gameImage);
setCurrentTitle(firstGame.gameTitle);
}
} catch (error) {
console.error('Error parsing JSON:', error);
}
}
};
window.addEventListener('storage', handleChange);
onCleanup(() => {
window.removeEventListener('storage', handleChange);
});
handleChange();
});
return (
<>
{currentImage() ? (
<>
<Dynamic
component="img"
className="current-image"
src={currentImage()}
alt="Game Image"
/>
<div className="current-text-container">
<Dynamic
component="p"
className="currently-downloading-game-title"
>
{currentTitle()}
</Dynamic>
</div>
</>
) : (
<p>No active downloads</p>
)}
</>
const [currentImage, setCurrentImage] = createSignal('')
const [currentTitle, setCurrentTitle] = createSignal('')
createEffect(() => {
const handleChange = () => {
const gameStorageInfo = localStorage.getItem('CDG');
if (gameStorageInfo) {
try {
const games = JSON.parse(gameStorageInfo);
if (games.length > 0) {
const firstGame = games[0];
setCurrentImage(firstGame.gameImage);
setCurrentTitle(firstGame.gameTitle);
}
} catch (error) {
console.error('Error parsing JSON:', error);
}
}
};
window.addEventListener('storage', handleChange);
onCleanup(() => {
window.removeEventListener('storage', handleChange);
});
handleChange();
});
return (
<>
{currentImage() ? (
<>
<Dynamic
component="img"
className="current-image"
src={currentImage()}
alt="Game Image"
/>
<div className="current-text-container">
<Dynamic
component="p"
className="currently-downloading-game-title"
>
{currentTitle()}
</Dynamic>
</div>
</>
) : (
<p>No active downloads</p>
)}
</>
6 replies