In this section, you’ll learn how to use the react-router library with Apollo to implement some navigation functionality!
First add the required dependencies to the app. Open a terminal, navigate to your project directory and type:
Before moving on to configure the different routes for your application, you need to create a
Header component that users can use to navigate between the different parts of your app.
This simply renders two
Link components that users can use to navigate between the
LinkList and the
Don’t get confused by the “other”
Linkcomponent that is used here. The one that you’re using in the
Headerhas nothing to do with the
Linkcomponent that you wrote before, they just happen to have the same name. This Link stems from the
react-router-dompackage and allows you to navigate between routes inside of your application.
You’ll configure the different routes for the app in the project’s root component:
For this code to work, you need to import the required dependencies of
Now you need to wrap the
BrowserRouter so that all child components of
App will get access to the routing functionality.
That’s it. If you run the app again, you can now access two URLs.
http://localhost:3000/ will render
http://localhost:3000/create renders the
CreateLink component you just wrote in the previous section.
To wrap up this section, you need to implement an automatic redirect from the
CreateLink component to the
LinkList component after a mutation was performed.
After the mutation was performed,
react-router-dom will now navigate back to the
LinkList component that’s accessible on the root route:
Note: It won’t display the newly created
Link, it’ll just redirect to the root route, you could always refresh to see the changes made. We’ll see how to update the data after the
Mutationis being triggered on the
More Mutations and Updating the Storechapter!