3

I have a component which is leveraging history.push('/login') after one has registered for my app.

However I am getting this behavior where the url in the address bar is changing but I am not seeing the new component. So I read the docs regarding componentDidUpdate and it states:

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

Use this as an opportunity to operate on the DOM when the component has been updated.

I would think it would be something like this to start with:

 componentDidUpdate(prevProps, nextProps) {
   if (this.props.location.pathname !== nextProps.props.location.pathname){
    this.props.location.pathname
    /* or some other black magic here */
   }
  }

But then I remembered you're not supposed to change props directly... How would I go about this?

UPDATE As per Sunil he mentioned I might have a HOC at a the very top level,

Because I was originally using Next.js they used a page navigation and I because of that I was doing this:

Folder structure:

enter image description here

Then wrapping a HOC around my client component:

import 'semantic-ui-css/semantic.min.css'
import RegisterForm from '../components/Register/RegisterForm.jsx'
import '../components/Register/Register.css'
import { withRouter } from "react-router-dom";

const Register = (props) => (<>
 <RegisterForm {...props} />
</>)

export default withRouter(Register)
Antonio Pavicevac-Ortiz
  • 7,239
  • 17
  • 68
  • 141
  • 1
    FYI, the first parameter is the previous props. I would check your router to ensure it is matching the route correctly and returning the component you want for that route. – Drew Reese Jan 02 '20 at 18:11
  • 2
    `url in the address bar is changing but I am not seeing the new component` There is a issue with history somewhere or you might be using pure component at very top level which does shallow comparison and so, re-render doesn't happens. It has nothing to do with componentDidUpdate – Sunil Chaudhary Jan 02 '20 at 18:35
  • @Sunil Thanks! Think you hit the nail on the head...Could you please take a look at my updated question? Going to add something. And can you explain why it wouldn't have to do with componentDidUpdate? – Antonio Pavicevac-Ortiz Jan 02 '20 at 18:39
  • seems that the path is not matching with url, doesn't seem to be related with the `componentDidUpdate ` method, did u check if it reaches that method? – Ishank Jan 02 '20 at 18:54
  • The code which is pasted, that seems fine. One Question: Are all other routes working fine and only this one is not working? If yes, please check if path is correct or any error in console is there. Also try putting some other working route instead of `/login` to see if that component is loading fine in this flow – Sunil Chaudhary Jan 02 '20 at 19:17

0 Answers0