CODEWITHSUNDEEP
javascriptreactjs
AdamantiumPrime
AdamantiumPrime

Reputation: 95

React reach router link tag updates url but not the component

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).

Upvotes: 2

Views: 220

Answers (2)

Ping Zhao
Ping Zhao

Reputation: 276

Maybe it is because you are trying to implement the nested routes. I have ever met such issue long before, and I reference the following links, and solved the issue.

https://medium.com/swlh/defining-nested-routes-with-react-router-8f140e87b360 https://reactrouter.com/web/example/nesting

Upvotes: 0

Abu Sufian
Abu Sufian

Reputation: 1054

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

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

  export default withRouter(navbar);

Upvotes: 0

Related Questions