redirect to the same component re render

Question

I'm using the same Form component for editing a post and adding a new one in my application. The componentDidMount of Form looks like this:

componentDidMount() {
    this.props.match ? this.props.dispa({
        type: 'ON_LOAD_ACTION',
        payload: this.props.fetch.data.find(x => x.id == this.props.match.params.id)
    }) : this.props.dispa({
        type: 'ON_RESET',
        payload: ''
    });
}

It checks if there's an id on the URL, e.g. localhost:3000/edit/id

I'm trying to update a post. I extract the data of the post and I can fill the form with it. If there's no id on the URL I just render the form empty. The second dispatch is for resetting the state to its initial state.

I'm using react-router/redux and my problem is when I'm on the edit form and click on create form. It doesn't re-render and I got the value of the post I was in. I think that it's because i'm redirecting to the same form.

     <Route exact path="/create" >
       <FromProduct />
       </Route>
     <Route exact path="/edit/:id" component={FromProduct}></Route>

But if I click on submit button to update the post or I go to the /home first, the component re-renders perfectly.

Check out this answer: https://stackoverflow.com/questions/42701129/how-to-push-to-history-in-react-router-v4 — Elman Huseynov, Mar 28 '20 at 10:59
The problem is probably that `componentDidMount` is not called again because the component is already mounted, try to add this check in the `componentDidUpdate` method as well. — Titus, Mar 28 '20 at 11:23
@FaroukYD it's always nice to provide a sandbox (codesandbox, for instance) example for complex scenarios like this. — Inacio Schweller, Mar 28 '20 at 12:22

score 1 · Accepted Answer · answered Mar 28 '20 at 12:43

There are different ways to see the problem:

React-router doesn't unmounts FromProduct component on each Route change. This is causing the behavior you described, you're seeing the same component always. You could try to force a re-render with an inline function.
Since your componentDidMount is not being called again, you can use componentWillReceiveProps on the FromProduct component. This way, for each Route change, it'll be executed even if it was mounted, because it'll now receive new props.

Solution #1 is not really recommended. The solution #2 would be doing something like this:

componentWillReceiveProps(newProps) {
  // very similar logic for componentDidMount
  // but use newProps instead of this.props
}

If you still want to try Solution #1, please check React router's documentation about inline rendering here.

redirect to the same component re render

1 Answers1