Problem with url parameters in React Router

I have user's profile and the route is:

<Route path="/profile/:username" component={UserProfile} />

The link to go to user profile is on Header, like this:

<Link to={`/profile/${props.username}`}>
   <strong>{props.username}</strong> 
</Link>

So, profile's url is localhost:3000/profile/username

There's another component UserPosts. There's a link on user profile, when clicked, shows user feed. Now I want the url like locahost:3000/profile/username/posts

How should my react Route component look like? The thing is I'm getting user's posts by id.

Backend route is: /posts/:id

And, how my Link should look like on the UserProfile component?

<Link to="">
   My Posts
</Link>

And, how should I set my routes. Here is my App.js currently.

      <div>
          <Router>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/register" component={SignUp} />
              <Route path="/login" component={Login} />
              <PrivateRoute
                path="/post/create"
                component={NewPost}
              />
              <Route path="/profile/:username" component={UserProfile} />
              <Route component={NotFound} />
            </Switch>
          </Router>
        )}
      </div>
    ```