javascript - React reach router link tag updates url but not the component

Question

In my App.js, I have:

<Profile path="/profile/:id" userId={this.state.userId} />

In my header/navbar, I have:

{this.props.userId ? (
          <Link to={`/profile/${this.props.userId}`} style={link_style}>
            <button className="btn">
              <span>Profile</span>
            </button>
          </Link>
        ) : null}

I have my site set up so that you can look at other people's profile. The problem arises here, if you are viewing someone else's profile (say the we are at the link localhost5000/profile/28937482394 and then you click on your own profile, the link updates to localhost5000/profile/1021231209 (my profile), but my profile is not displayed -- component not rendered).

question from:https://stackoverflow.com/questions/65906590/react-reach-router-link-tag-updates-url-but-not-the-component

Answer 1

Your navbar should be inside < Router> and export your navbar with withRouter

  <Router history={history}>
    <Navbar />
    <Routes />
  </Router>,  

  export default withRouter(navbar);