I am new to SolidJS and have implemented solidjs/router for route navigation in my starter project. I want to reinitialize certain functionalities whenever the route changes. I initially wrote the reinitialization logic using useLocation
and createEffect
, but this approach doesn’t seem to work with the latest version of solidjs/router (v0.14.10). Interestingly, when I downgrade to version (v0.9.1), the same code works as expected.
Here’s the code I used:
const App = () => {
const location = useLocation();
createEffect(() => {
const currentPath = location.pathname;
console.log(`Route changed: ${currentPath}`);
window.HSStaticMethods.autoInit();
});
return (
<Router>
<div class="bg-base-200/60 min-h-screen">
<Navbar />
<div class="p-6">
{/* Define routes */}
<Route path="/" component={Home} />
<Route path="/button" component={Button} />
<Route path="/card" component={Card} />
<Route path="/form-elements" component={FormElements} />
<Route path="/accordion" component={Accordion} />
<Route path="/advance-forms" component={AdvanceForms} />
<Route path="/overlays" component={Overlays} />
</div>
</div>
</Router>
);
};
export default App;
However, I encounter an error :Error Image.
Could anyone guide me on how to resolve this issue in the latest version?
Thank you in advance!
I encountered an issue with the following code, which causes an error in my project:
const location = useLocation();
createEffect(() => {
const currentPath = location.pathname;
console.log(`Route changed: ${currentPath}`);
window.HSStaticMethods.autoInit();
});
When I remove this section of code, the project functions correctly, but the desired behavior of reinitializing when the route changes is lost. As a result, the component’s JavaScript is not re-triggered upon navigation.
I’m looking for guidance on how to ensure that my components reinitialize properly when the route changes, without causing any errors. Any advice or suggestions would be greatly appreciated!