Screen went empty since login

[NewJerseyStyle]

Expected behavior:
admin portal should appear after login as admin

Actual behavior:
Screen went empty since login
error in console:

Uncaught TypeError: this.props.history is undefined
admin_bundle.51a06860.js:2:675245

To Reproduce:
goto https://20.83.181.230/

Screenshots:

[NewJerseyStyle]

go dev mode also throw me back to /signin with strange render:

console saying

polisAjax promise failed:  
Arguments { 0: {…}, 1: "error", 2: "Unauthorized", … }
​
0: Object { readyState: 4, getResponseHeader: getResponseHeader(e), getAllResponseHeaders: getAllResponseHeaders(), … }
​
1: "error"
​
2: "Unauthorized"
​
callee: 
​
length: 3
​
Symbol(Symbol.iterator): function values()
​
<get callee()>: function ()
​
<set callee()>: function ()
​
<prototype>: Object { … }
admin_bundle.51a06860.js:2:284202

[NewJerseyStyle]

I guess we will just roll back all node module updates

[NewJerseyStyle]

Support from AI:

This error indicates that the component trying to access this.props.history isn’t receiving the routing props from React Router. Here are a few approaches to resolve this issue:

1. If you’re using class components, make sure the component is wrapped with the withRouter higher‐order component so that it gets the history prop injected. For example:

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Login extends Component {
  componentDidMount() {
    // Now this.props.history is available
    console.log(this.props.history);
  }

  render() {
    return <div>Login Component</div>;
  }
}

export default withRouter(Login);

2. If you are using React Router v6 or later, note that withRouter is no longer provided. Instead, you should use the useNavigate hook in a functional component. For example:

import React from 'react';
import { useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();

  React.useEffect(() => {
    // navigate works like history.push
    console.log(navigate);
  }, [navigate]);

  return <div>Login Component</div>;
};

export default Login;

3. Ensure that the component is rendered within a Router. If the component is rendered outside a (or another Router), then the routing props won’t be available.

If you have components that are not directly rendered by a Route and still need access to the history (or navigate function), consider either wrapping them with withRouter (if on React Router v5 or earlier) or passing the navigation function as a prop from a component within the router context.

By making sure your component is either wrapped properly or converted into a functional component using the appropriate hook, the error “this.props.history is undefined” should be resolved.

[NewJerseyStyle]

resolved error of this.props.history, Keep hitting error

GET
http://20.83.181.230/api/v3/users?errIfNoAuth=true
[HTTP/1.1 401 Unauthorized 272ms]

polisAjax promise failed:  
...

[NewJerseyStyle]

go dev mode also throw me back to /signin with strange render:

Actually the signin is done and clicking the button at bottom leads me to the admin panel. just UIs are broken

And the React Router v6 is still broken on many other pages

[NewJerseyStyle]

Consider page redirect to /home after signin, maybe the router v6 on client-admin/src/index.js caused the problem

[NewJerseyStyle]

Before sign-in, the dashboard is at bottom of home page, but cannot operate with persist occurring error 401. After sign-in... it become the whole page.

[NewJerseyStyle]

Now it worked which the issue in title has been fixed, but the dashboard should not show before login. an issue to be fixed

[NewJerseyStyle]

fixed by roll back to router v5