同じルートとコンポーネントを使用しながら、パスの変更時にコンポーネントを更新するにはどうすればよいですか？

ユーザーが別のユーザープロファイルを表示していて、ナビゲーションバーで自分のプロファイルリンクをクリックしようとすると、コンポーネントが更新されることはありません。ReduxとReactの両方の開発ツールで、状態が正しく更新されたことを示していますが、コンポーネントは気づいて更新されていないようです。

class App extends Component {  
  render() {
    return (
      <Router>
        <div>
          <Navbar />
          <NavbarFix />
          <Switch>
            <Route exact path="/" component={Posts} />
            <Route exact path="/submit" component={AuthRoute(Submit)} />
            <Route exact path="/signup" component={AlreadyAuth(SignUp)} />
            <Route exact path="/login" component={AlreadyAuth(LogIn)} />
            <Route exact path="/user/:id" component={AuthRoute(User)} />
            <Route exact path="/item/:id" component={AuthRoute(Item)} />
            <Route exact path="/admin" component={AdminAuth(Admin)} />
            <Route exact path="/banned" component={Banned} />
            <Route component={NoMatch} />
          </Switch>
        </div>
        </Router>
    );
  }
}

。

class User extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      user: [],
      comments: []
    };

  }

  componentDidMount() {
    this.loadUser();
  }

  loadUser = () => {
    API.findUserById(this.props.match.params.id)
      .then(res => {
        console.log(res.data);
        this.setState({
          user: res.data.user,
          posts: res.data.user.Posts,
          comments: res.data.comments
        });
        console.log(this.state)
      })
      .catch(err => console.log(err));
      this.setState(this.state)
  }

  handleCommentDelete = id => {
    API.deleteComment(id)
      .then(res => this.loadUser())
      .catch(err => console.log(err));
  }

  handlePostDelete = id => {
    API.deletePost(id)
      .then(res => this.loadUser())
      .catch(err => console.log(err));
  }

  render() {
    return (
      <div>
        <div className="container-fluid">
          <div className="row">
            <div className="col-4 user-data-container">
              <div className="row">
                <div className="col-12 text-center">
                  <h2>{this.state.user.username}'s Posts</h2>
                </div>
              </div>
              <hr className="pb-4" />
              <div className="row">
                <div className="col-12">
                  {this.state.posts.length > 0 ?
                    this.state.posts.map(post => (
                      <PostContainer handledelete={this.handlePostDelete} post={{ ...post, User: this.state.user }} key={post.id} check={this.props.id} />
                    ))
                    :
                    <h1>No Posts To Show!</h1>
                  }
                </div>
              </div>
            </div>
            <div className="col-4 user-data-container">
              <div className="row">
                <div className="col-12 text-center">
                  <h2>{this.state.user.username}'s Comments</h2>
                </div>
              </div>
              <hr className="pb-4" />
              <div className="row">
              <div className="col-12">
                {this.state.comments.length > 0 ?
                  this.state.comments.map(comments => (
                      <CommentContainer verified={this.state.user.verified} handledelete={this.handleCommentDelete} check={this.props.id} comment={comments} className="hover-effect single-comment" key={comments.id}/>
                  ))
                  :
                  <h1>No Comments To Show!</h1>
                }
                </div>
              </div>
            </div>
            <div className="col-4 user-data-container">
              <div className="row">
                <div className="col-12 text-center">
                  <h2>{this.state.user.username}'s Information</h2>
                </div>
              </div>
              <hr className="pb-4" />
              <div className="row">
              <div className="col-12">
                  <UserContainer user={this.state.user}/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    username: state.auth.username,
    id: state.auth.id,
    email: state.auth.email,
    profileImg: state.auth.profileImg,
    verified: state.auth.verified
  };
};

export default withRouter(connect(mapStateToProps)(User));

これは、使用されている同じルートとコンポーネントに関係していると思うので、実際には変更に気づいていません。これを修正する方法はありますか？私の理解では、コンポーネントは状態の変化に応じて更新されるはずです。