React - Route with same path, but different parameters change data on update

Question

I am creating a page where you can see peoples profiles and all their items, which has pathname="/users/{their id}" and a menu where it can take you to your profile. But my problem is that when you go to a persons profile page, and then to another one, the pathname changes but the data does not get rendered it only changes the pathname and the data remains the same. In order to render the data, you would have to refresh the page and then it shows the new users data. How would I get it so you wouldn't have to refresh the page, so like they click on the user they want to go to, the pathname changes and renders the new data without the page refresh? Also, something happens when you refresh the page when on a user profile, it is supposed to return the users' email address, which it does when you first visit the page, but when you refresh the page it returns an error saying it can't find the email.

Here is the code for the menu part (link to my profile):

import { Meteor } from "meteor/meteor"
import React from "react";
import { withRouter, Link } from "react-router-dom";

import { SubjectRoutes } from "./subjectRoutes/subjectRoutes";
import AddNote from "./AddNote";

class Menu extends React.Component{
  render(){
    return(
      <div>
        <div className="scroll"></div>
        <div className="menu">
          <h1>Menu</h1>
          <p><Link to="/">Home</Link></p>
          <Link to="/searchNotes">Notes</Link>
          <p><Link to="/addNote">Add a Note</Link></p>
          <p><Link to={`/users/${Meteor.userId()}`} >My Profile</Link></p>
        </div>
      </div>
    )
  }
}
export default withRouter(Menu)

userProfile.js:

import { Meteor } from "meteor/meteor";
import React from "react";
import { withRouter } from "react-router-dom";
import { Tracker } from "meteor/tracker";

import Menu from "./Menu";
import RenderNotesByUserId from "./renderNotesByUserId"

class userProfile extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      email: ""
    };
  }
  logoutUser(e){
    e.preventDefault()
    Accounts.logout(() => {
      this.props.history.push("/login");
    });
  }
  componentWillMount() {
    Meteor.subscribe('user');
    Meteor.subscribe('users');
    this.tracker = Tracker.autorun(() => {
      const user = Meteor.users.findOne(this.props.match.params.userId)
      this.setState({email: user.emails[0].address})
    });
  }
  render(){
    return(
      <div>
        <Menu />
        <button onClick={this.logoutUser.bind(this)}>Logout</button>
        <h1>{this.state.email}</h1>
        <RenderNotesByUserId filter={this.props.match.params.userId}/>
      </div>
    )
  }
}
export default withRouter(userProfile);

Sorry to make this question so long it's just a really weird problem that I am having which I can't seem to find any answers to online.

Answer 1

ComponentWillMount() only runs one time, before your component is rendered. You need to also use ComponentWillReceiveProps() in order to update your state when your props change.

Check out React Component Lifecycle