React Link updates url, but not the view

Question

I have the problem that when i navigate to the same component(with another id) from the same component with a Link the url gets updated, but the component itself not. When navigating to the component from somewhere else, everything goes fine. When refreshing it also works.

I am referring to my EditResultForm component.

I render everything from index.js:

// React router import
import {BrowserRouter as Router} from 'react-router-dom'

ReactDOM.render((
        <Router>
        <App />
        </Router>
), document.getElementById('root'));

registerServiceWorker();

App.jsx renders different components depending on certain conditions:

  render() {
    if (this.state.authorized) {
      return (
        <div className="App">
        {this.state.hide ? null : 
          <Header username={this.state.username} changeUsername={this.usernameChangedHandler} authorize={this.authorizeHandler} /> }
          <Main changeUsername={this.usernameChangedHandler} authorize={this.authorizeHandler} authorized={this.state.authorized} hideHandler={this.hideHandler}/>
        </div>
      );
    } else {
      return (<div><LoginForm changeUsername={this.usernameChangedHandler} authorize={this.authorizeHandler} authError={this.state.authError} />
        <Route exact path="/register" component={RegisterForm} /></div>);
    }
  }
}

Then main renders all the routes:

  render() {
    return (
      <div>
      <main className="container-fluid fill">

        <Switch>
          <Route path="/login" render={() => <LoginForm changeUsername={this.state.changeUsername} authorize={this.state.authorize} />} />
          <PrivateRoute exact path="/" component={Home} />

          <PrivateRoute exact path="/result" component={Result} />
          <PrivateRoute path="/result/update/:id" component={EditResultForm} />

          <Route exact path="/register" component={RegisterForm} />

        </Switch>
      </main>
      </div>
    );
  }

I've read the article about blocked updates, but my component does receive the location object, so I think the problem lies elsewhere.

I tried something like this in my component:

  componentDidMount() {
    this.props.history.listen((location, action) => {
      if (location.pathname !== this.props.location.pathname) {
        console.log(location, action);

        this.props.location.pathname = location.pathname;

        this.forceUpdate();
      }

    });
}

But that didn't work either. Does anybody know what the problem is here?

Thanks in advance, Mike

Putting your update logic in your `componentWillReceiveProps` and make the update there. — konekoya, May 17 '18 at 09:51
@konekoya Okayy, thank you very much! That solved my problem. But what's the reason behind this? Why does it work with componentWillReceiveProps and not with ComponentDidMount? Is that because when you are navigating from the same component to the same component it is already rendered and thus the ComponentDidMount never gets triggered again? — Maikkeyy, May 17 '18 at 10:00
Cannot 100% sure about this. But I think you're correct. React router is not re-mounting the component so you have to use `componentWillReceiveProps`. And note that `componentWillReceiveProps` will be deprecated >= React 17. — konekoya, May 17 '18 at 10:09

score 0 · Accepted Answer · answered May 17 '18 at 10:14

0

Use this as reference, component WillReceiveProps will fix this

React doesn't reload component data on route param change

answered May 17 '18 at 10:14

Jeeva

1,245
7
12

React Link updates url, but not the view

1 Answers1