SolidJS•10mo ago

Problem duplicating a component navigating with dynamic routing

I am having difficulty causing a route component to be duplicated when navigating between a dynamic route in an Electron/SolidJS application using the SolidJS Router. Example route def:

<Route path="/search" component={Search}>
  <Route path="/" />
  <Route path="/:id" component={SearchWorkspace} />
</Route>

<Route path="/search" component={Search}>
  <Route path="/" />
  <Route path="/:id" component={SearchWorkspace} />
</Route>

My intention is to navigate between say /search/123456789 to /search/987654321 but am unable to get the components to re-render unless I visit another route first. The Search component contains the <Outlet/> for the route. The concept is basically that this application allows you to have multiple search instances open to work with different sets of data. Each instance is available as a tab in the Search component. By clicking between the tabs the lower layout is rendered according to the UID. I saw in the Router docs that you can wrap some part with a <Show> component, but I was having difficulty understanding the example. Any help would be greatly appreciated.

3 Replies

original_sin.•10mo ago

Hi i am having the same issue did you find whats causing it? Based on the research i did it seems we need to track the params of the dynamic route that we want to track i.e that would be changed. So i think the outlet component will not render but we can capture the dynamic route param change event like this in the component : createEffect(() => { console.log("Params") console.log(params.id) }) Now when ever the params will change the createEffect will get triggered.

argimenes•6mo ago

I found this issue went away when I upgraded to 0.8.2 Router.

Calhistorian•6mo ago

Nice! I have actually deprecated the feature until I could figure it out. Time to revisit.

Gaming

Programming

Problem duplicating a component navigating with dynamic routing