Wrapping `<FileRoutes />` in `ErrorBoundry`

Im trying to migrate from the pre 1.0 day, when

solid-start

solid-start

cli was still a thing. Back then I was able to do smth like this in the root component:

      <Body>
        <Suspense>
          <ErrorBoundary>
            <Routes>
              <FileRoutes />
            </Routes>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>

      <Body>
        <Suspense>
          <ErrorBoundary>
            <Routes>
              <FileRoutes />
            </Routes>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>

Trying to accomplish the same thing, wanting to wrap the

FileRoutes

FileRoutes

in an

ErrorBoundry

ErrorBoundry

, by doing this in the

app.tsx

app.tsx

    <Router
      root={(props) => (
        ....
      )}
    >
    <ErrorBoundary fallback={(err) => <p>Error: {err}</p>} >
      <FileRoutes />
    </ErrorBoundary>
    </Router>

    <Router
      root={(props) => (
        ....
      )}
    >
    <ErrorBoundary fallback={(err) => <p>Error: {err}</p>} >
      <FileRoutes />
    </ErrorBoundary>
    </Router>

But that results in a hydration error

SolidJS•2y ago•

4 replies

the magic guy

Wrapping `<FileRoutes />` in `ErrorBoundry`

Im trying to migrate from the pre 1.0 day, when

solid-start

solid-start

cli was still a thing. Back then I was able to do smth like this in the root component:

      <Body>
        <Suspense>
          <ErrorBoundary>
            <Routes>
              <FileRoutes />
            </Routes>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>

      <Body>
        <Suspense>
          <ErrorBoundary>
            <Routes>
              <FileRoutes />
            </Routes>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>

Trying to accomplish the same thing, wanting to wrap the

FileRoutes

FileRoutes

in an

ErrorBoundry

ErrorBoundry

, by doing this in the

app.tsx

app.tsx

    <Router
      root={(props) => (
        ....
      )}
    >
    <ErrorBoundary fallback={(err) => <p>Error: {err}</p>} >
      <FileRoutes />
    </ErrorBoundary>
    </Router>

    <Router
      root={(props) => (
        ....
      )}
    >
    <ErrorBoundary fallback={(err) => <p>Error: {err}</p>} >
      <FileRoutes />
    </ErrorBoundary>
    </Router>

But that results in a hydration error

Wrapping `<FileRoutes />` in `ErrorBoundry`

Similar Threads

Wrapping `<FileRoutes />` in `ErrorBoundry`

Similar Threads

Similar Threads

Similar Threads