Webpage not loading CSS when I navigate to a specific URL (react router) from address bar

[jdelanylaz]

Hi,

I am very stuck on an issue with my application and was wondering if you may have an idea. This could very well be something I am doing wrong or may be a bug. My app is using "react-router-dom": "^5.2.0", I have your switcher around the with multiple Routes. Here is a rough sample

<ThemeSwitcherProvider
      defaultTheme={darkMode.value ? 'dark' : 'light'}
      themeMap={themes}
      insertionPoint="inject-styles-here"
    >
      <Router>
        <AuthProvider>
          <ScrollToTop>

            <Switch>
              <Route exact path="/">
                <Redirect to="/home" />
              </Route>

              <PrivateRoute path='/home' component={Home} />
              <PrivateRoute path='/profile' component={Profile} />
              <PrivateRoute path='/x/search' component={y} />
              <PrivateRoute path='/x/tags' component={z} />
              <PrivateRoute path='/x' component={x} />
              <PrivateRoute path={'/a/:aId'} component={a} />
              <PrivateRoute path='/a' component={a} />

            </Switch>

          </ScrollToTop>
        </AuthProvider>
      </Router>
    </ThemeSwitcherProvider >

Navigating throughout my app, the css loads/works fine but on some routes, if I navigate directly to it from the address bar, no CSS loads at all. I was wondering if you have any ideas as to why this could be or how I can debug. I see no differences between the components which is why I am stumped.

Thanks for this library and your blog post - excellent stuff

[jdelanylaz]

seemed to have fixed it with this: https://stackoverflow.com/questions/40426011/react-router-not-loading-css-for-nested-pages-on-refresh

i guess when adding the styles-insertion-pointi had to load the css files now from route. closing this here. sorry for any trouble