Как обновить компонент, если меняется только часть url?

Question

[Alex]

При клике на пользователе NavLink меняет Url, и Router перебрасывает пользователя в компонент profile в котором извлекается id из URL с помощью withRouter и происходит запрос на сервер за данными пользователя, в результате мы видим профиль пользователя. Когда я кликаю в navbar (меню) по ссылке Profile, NavLink подставляет в URL мой id, но компонент не перерисовывается.
И на экране по прежнему страница того пользователя.
То есть при смене этого url localhost:3000/profile/143 на localhost:3000/profile/54242 Router не реагирует.
Но если обновить страницу, происходит аякс запрос и выводится моя профиль. Как сделать так, чтобы компонент обновлялся сам (при клике по ссылке)?

App.js:

<Route path={"/profile/:userId?"} render={() =>
		<ProfileContainer />} />

ProfileContainer

class ProfileContainer extends React.Component {

	componentDidMount() {
		console.log(this.props);
		// id из URL
		let userId = this.props.match.params.userId;
		console.log(userId);
		if(!userId) {
			if(this.props.isAuth) {
				console.log(this.props.isAuth);
				userId = this.props.authId;
			}
		}
		// запрос пользователя, по которому был клик
		axios.get(`https://social-network.samuraijs.com/api/1.0/profile/${userId}`)
			.then(response => {
				// здесь setUserProfile это колл бэк принадлежащий react-redux
				this.props.setUserProfile(response.data);
			});
	}
	
	
	
	render() {
		return (
			<Profile {...this.props} profile={this.props.profile} />
		)
	}
};

const mapStateToProps = (state) => ({
	profile: state.profilePage.profile,
	isAuth: state.auth.isAuth,
	authId: state.auth.userId
});

// withRouter добавляет данные из Url
let WithURLDataContainerComponent = withRouter(ProfileContainer);

export default connect(mapStateToProps, {setUserProfile})(WithURLDataContainerComponent);

Answer 1

[Валерий]

Так как по данному роуту рендериться один и тот же компонент, не происходит его размонитрования из dom при смене url.
Поэтому вам стоит добавить метод componentDidUpdate в котором вы будете сравнивать:

...
componentDidUpdate(prevProps) {
    if (prevProps.match.params.userId !== this.props.match.params.userId) {
        // шлете запрос с новым userId = nextProps.match.params.userId
    }
}

Comments

[Alex]

Спасибо, заработало!