In this section, we’ll see how to use the React Router with Apollo to implement navigation!
Let’s start by adding the dependencies we’ll need.
Before moving on to configure the different routes for the
app, we need to create a
Header component that will hold
the navigation links.
Header component currently just renders two
components that can be used 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 us to navigate between routes inside of your application.
Let’s configure the different routes for the app in the
project’s root component:
We now need to wrap the
BrowserRouter so that
all child components of
App will get access to the routing
If we run the app again, we can now access two URLs.
http://localhost:3000/ will render
http://localhost:3000/create renders the
component we created in the previous section.
To wrap up this section, we need to implement an automatic
redirect from the
CreateLink component to the
component after a mutation is performed. To do this, we can
onCompleted function that is provided by Apollo
when mutations are performed.
After the mutation completes, React Router will navigate
back to the
LinkList component that’s accessible on the
Note: With our current setup, we won’t see the newly created
Link, we’ll just redirect to the main route. We could refresh the page to see the changes made. We’ll see how to update the data after the mutation completes in the
More Mutations and Updating the Storechapter!