withRouter deprecated, replaced with Navigate and getting useContext error for Register.js

[gregoryekhator]

Hi Rishi and all,

First of all thanks, so much for this tutorial.

My challenge is it is 4 years old and we are now using react-router v6 with some deprecations including withRouter which you implement in this MERN-AUTH tutorial.

I am getting withRouter deprecated,
So i replaced with Navigate for register.js here:

export default connect(
mapStateToProps,
{ registerUser }
)(Navigate(Register));

and I get this error getting useContext error on Register.js

Cannot read properties of null (reading 'useContext')
TypeError: Cannot read properties of null (reading 'useContext')
at Object.useContext (http://localhost:3000/static/js/bundle.js:47601:25)
at useInRouterContext (http://localhost:3000/static/js/bundle.js:43805:45)
at Navigate (http://localhost:3000/static/js/bundle.js:44689:4)

Note: I am really after the banking tutorial, but since it relies on this one, i had to do this one first.

Any chance of updating this MERN-AUTH tutorial, and the banking tutorial for 2023 react/typescript/node specs for compatibility with react-router version 6 and what else could trigger errors?

Many thanks