victortrusov / react-router-loading Goto Github PK

The Switch doesn't seem to recognize dynamically inserted routes, eg.:

<Switch>
    { routes.map(route => <Route key={route.id} path={route.path} loading>
        { React.createElement(getComponent(route.component) }
    </Route>}
</Switch>

The routes simply do not work. If I manually add routes outside the .map(), they work as expected. The dynamic routes work as expected in react-router-dom.

Any workaround or a way to get this working, or is the support for this use case just missing?

This lib was a great help to me but I believe I found two bugs. In the below example, the expected behavior is to have the NotFoundPage component render any non matching path. Instead the router renders nothing.

<Switch>
    <Route path="/page1" component={Page1} />
    <Route path="/page2" component={Page2} />
    ...
    <Route component={NotFoundPage} />
</Switch>

Bug 2: When using a wildcard path an error is thrown, "Error: Invariant failed: You should not use <Route> outside a <Router>".

<Switch>
    <Route path="/page1" component={Page1} />
    <Route path="/page2" component={Page2} />
    ...
    <Route path="*" component={NotFoundPage} />
</Switch>

I was able to fix the first bug by modifying findMatchingRoute (https://github.com/victortrusov/react-router-loading/blob/master/src/utils.js#L6) to force a match when there is no path attribute on a route but I'm unsure if that breaks anything else. I suspect a better fix would solve both problems at once.

I need to change LoadigContext globally, now I'm trying this code

import { useContext, useEffect } from 'react';
import { Route, LoadingContext, Switch, } from "react-router-loading"
import { useIsFetching } from 'react-query'

const App = () => {
  const loadingContext = useContext(LoadingContext);
  const isFetching = useIsFetching()

  useEffect(() => {
    // handle loading state globally by external library
    if(isFetching) loadingContext.start()
    else loadingContext.done()
  }, [isFetching])


  return (
    <Switch>
      <Route loading path="/" component={HomePage} />
      <Route loading path="/user" component={UserPage} />
      <Route loading path="/developer/:id" component={SettingPage} />
    </Switch>
  )
}

So the LoadingContext is not available because provided in Switch component
and I don't know any other ways to get LoadingContext globally

Now I see for good library but I have a some problem with react 18, sure I read for requirement, could you save my day thank you.

Following the installation and usage steps, I am getting the following error:

Type '{ path: string; element: Element; }' is not assignable to type 'IntrinsicAttributes & RouteProps'.
  Property 'path' does not exist on type 'IntrinsicAttributes & RouteProps'.

My current react-router-dom version is 6.10.0. Here are screenshots for reference.

First thank you for taking your time and abstracting out loading functionality like this. Now regarding the issue that I observe.

In peerDependencies you specify react-router-dom as a dependency, however in components you tend to use react-router (like here), which is not an equivalent and is in fact conflicting with the former one, 'causing nasty and sometimes unreproducible issues.

I'd suggest to import from react-router-dom everywhere.

Could i customize the loading elements likes spinner?

tsc throws the following error:

error TS7016: Could not find a declaration file for module 'react-router-loading'. './node_modules/react-router-loading/dist/react-router-loading.es.js' implicitly has an 'any' type.

There are types at './node_modules/react-router-loading/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'react-router-loading' library may need to update its package.json or typings.