When I was using react-nprogress, I get the following problem in my console:

Here's my code:
const NTTracker = () => {
const [isLoading, setIsLoading] = useState(false);
const [state, dispatch] = useContext(NTTrackerContext);
return (
<>
<Router>
<Route
render={({ location }) => (
<>
<Progress isAnimating={isLoading} key={location.key} />
<TransitionGroup className="body-dom">
<CSSTransition
classNames="fade"
key={location.key}
onEnter={() => {setIsLoading(true)}}
onEntered={() => {setIsLoading(false)}}
timeout={450}
in={true}
>
<Switch location={location}>
<Route exact path="/"><h1>Home</h1></Route>
// code for Login and APIHome below
<Route exact path="/accounts/login"><Login/></Route>
<Route exact path="/api/:teamname"><APIHome/></Route>
<Route exact path="*" component={NoMatch} />
</Switch>
</CSSTransition>
</TransitionGroup>
<Footer/>
</>
)}
/>
</Router>
</>
);
};
Please note that NTTracker is wrapped in a context provider.
return (
<NTTrackerContextProvider initState={initialState}>
<NTTracker/>
</NTTrackerContextProvider>
)
This is pretty similar (if not the same) with the demo usage. The problem is that nprogress seems unable to handle redirections with state change correctly, per the output above.
More specifically, the error occurred with these steps:
- the user clicks "log out," at URL
/api/team1and the state of the application is changed (state.user.authenticatedchanged fromtruetofalse). - when the state is changed, the code below detects the change and redirects the user to
/accounts/login - when the page completed the redirection, the error above occurred.
The URL http://127.0.0.1:3000/api/team1 is defined as:
function APIHome() {
if (!state.user.authenticated) history.push("/accounts/login");
// ...
}
The redirected URL http://127.0.0.1:3000/accounts/login is defined as:
function Profile() {
// if you need anything in here, please let me know
My description and logging may not be exactly accurate. If there are any inquiries or potential problems in my error description, please comment below.
Unfortunately, I can't put this into a sandbox because it will essentially be hosting the entire project as the bug depends on the change of state (where the data are retrieved from a separate backend server).
Thanks in advance.