Advanced routing with React Router

The primary goal of this chapter is to build a profile page for your users. We need a separate page to show all of the content that a single user has entered or created. The content would not fit next to the posts feed. When looking at Facebook, we can see that every user has their own address, under which we can find the profile page of a specific user. We are going to create our profile page in the same way, and use the username as the custom path.

We have to implement the following features:

  1. We add a new parameterized route for the user profile. The path starts with /user/ and follows a username.
  2. We change the user profile page to send all GraphQL queries, including the username route parameter, inside of the variables field of the GraphQL request.
  3. We edit the postsFeed query to filter all posts by the username parameter provided.
  4. We implement a new GraphQL query on the back end to request a user by their username, in order to show information about the user.
  5. When all of the queries are finished, we render a new user profile header component and the posts feed.
  6. Finally, we enable navigation between each page without reloading the complete page, but only the changed parts.

Let's start by implementing routing for the profile page in the next section.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.134.90.44