React Router V4 - Page does not rerender on changed Route - reactjs

Question

I am building a small App to learn React with Meteor.
The user is asked to input a location, based on this location the user gets routed to a new page, where the location is displayed on the top of the page and some data from the database based on that location (not yet, this is my next step).
I store the location in state on the component. Now it would be nice if the user could change the location.
This is easy: just update state, e voilá. Or so I thought. The problem now is that the URL doesn't update, which looks dumb.
I then thought: "Okay, lets check on click if old location (in state) and new location (from input) are different, and if so set a redirect state"
In my render function if redirect is set I would just route the user to the same page again, but now the page won't reload. Any Ideas?
I know there are a thousand questions on react router v4 out there right now, because they just updated the version recently. I have been reading documentation for the last hours and just can't wrap my head around it.
import React, { Component } from 'react';
import { Route, Redirect } from 'react-router'
import LocationPicker from './LocationPicker'
export default class LocationDisplay extends Component {
constructor () {
super();
this.setLocation = this.setLocation.bind(this);
this.state = {redirect: false};
}
setLocation(value) {
this.setState({locationId: value});
if (this.state.locationId != value) {
this.setState({redirect : true})
};
}
componentWillMount() {
this.setState({
locationId: this.props.match.params.locationId,
});
}
render () {
return (
this.state.redirect
?
<Redirect push to={{
pathname: `/location/${this.state.locationId}`
}}/>
:
<div>
<LocationPicker
returnLocation={this.setLocation}
locationId={this.state.locationId}
/>
<h1>Please find below all recommendations for {this.state.locationId}</h1>
</div>
)
}
}
And here my Routes:
import React from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import { render } from 'react-dom';
import App from './App';
import LocationPicker from './LocationPicker';
import LocationDisplay from './LocationDisplay';
Meteor.startup(() => {
render(
<Router>
<div>
<Route exact path="/" component={LocationPicker}/>
<Route path="/location/:locationId" component={LocationDisplay}/>
</div>
</Router>,
document.getElementById('render-target')
);
});
Update:
I tried using <Link> instead of <Redirect>, however this has the same effect. Even more so, it does not update URL at all now.
render () {
return (
this.state.redirect
?
<Link to={{
pathname: `/location/${this.state.locationId}`
}}/>
:
<div>
<LocationPicker
returnLocation={this.setLocation}
locationId={this.state.locationId}
/>
<h1>Please find bellow all recommendations for {this.state.locationId}</h1>
</div>
)
}
Any explanation regarding the problem in basic language would also be extremely appreciated. I am just not there yet :(
Cheers and thx alot

Answer 1

You can't expect to change the route just by changing the state. Even with the <Redirect> approach that you have used, it only make an infinite redirect loop by setting this.state.redirect true. Because Route use same LocationDisplay instance with each redirect and this.state.redirect will be always true. However, react-router automatically directs this redirect loop and renders a blank.
The correct way to change routes in react-router is use push method in history object. You can simply call push method with your new path name as follows.
setLocation(value) {
this.props.history.push(`/location/${value}`);
}
Also, I don't understand why you keep locationId in your state. It's already in your props at this.props.match.params.locationId. So there is no point of keep same data in two places because having a single source of truth is ideal. Otherwise, you always have to write additional code lines to keep locationId in state and props sync. So I suggest you to, change your approach to something like this.
export default class LocationDisplay extends Component {
constructor () {
super();
}
setLocation(value) {
this.props.history.push(`/location/${value}`);
}
render () {
const locationId = this.props.match.params.locationId
return (
<div>
<LocationPicker
returnLocation={this.setLocation}
locationId={locationId}
/>
<h1>Please find below all recommendations for {locationId}</h1>
</div>
)
}
}
(This code is just to get an idea. I didn't test this code as I don't have other parts. If you can provide codepen or jsfiddle with your current implementation I can update it to work.)

Answer 2

For those experiencing this problem with Redux, wrap your connect within withRouter, as shown here: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md