Calhistorian Posts - Answer Overflow

Calhistorian

•Created by Calhistorian on 2/1/2024 in #support

Placement of Context Providers and Routes (Router 10.10)

I have an existing application which uses several context providers for sharing data between routes. My question is where do I place the context providers in relation to the route definitions using SolidJS/Router v10+. Is it acceptable to put context providers above the <Router>? Environment: Electron/SolidJS, <HashRouter> The Solid Router docs state:

2. Provide a root level layout This will always be there and won't update on page change. It is the ideal place to put top level navigation and Context Providers

If I set up like this as suggested by the docs: main.tsx (simplified)

render(() => {
  return (
    <HashRouter root={App}>
      <Route path='/home component={Home} />
      <Route path='/search component={Search} />
      <Route path='/settings component={Settings} />
    </HashRouter>
)}, root);

render(() => {
  return (
    <HashRouter root={App}>
      <Route path='/home component={Home} />
      <Route path='/search component={Search} />
      <Route path='/settings component={Settings} />
    </HashRouter>
)}, root);

app.tsx (simplified)

const App = () => {

  // ... various data fetching functions to cache in providers

  return (
    <Provider>
      <AppWindow>
        <Nav>
        {props.children}
      </AppWindow>
    </Provider>
  )
};

const App = () => {

  // ... various data fetching functions to cache in providers

  return (
    <Provider>
      <AppWindow>
        <Nav>
        {props.children}
      </AppWindow>
    </Provider>
  )
};

8 replies

SSolidJS

•Created by Calhistorian on 9/17/2023 in #support

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.

5 replies

Gaming

Programming