We’re overhauling Dgraph’s docs to make them clearer and more approachable. If
you notice any issues during this transition or have suggestions, please
let us know.
React Router
The routing library you’ll be using in the app is React Router. It provides a way to create routes and navigate between them. For example, the app’s home URL at/
will render a list of posts, while /post/0x123
will render the React
component for the post with id 0x123
.
Add dependencies to the project using the following commands:
-D
option adds the TypeScript types @types/react-router-dom
to the
project as a development dependency. Types are part of the development
environment of the project to help you build the app; but, in the build these
types are compiled away.
Add components
You’ll need components for the app to route to the various URLs. Create asrc/components
directory, and then components for the home page
(components/home.tsx
) and posts (components/post.tsx
), with the following
file content:
Add routing
With the boilerplate components in place, you are now ready to add the routing logic to your app. EditApp.tsx
to add routes for the home
and post
views,
as shown below.
Note that the base URL points to the home
component and /post/:id
to the
post
component. In the post component, id
is used to get the data for the
right post:
This Step in GitHub
This step is also available in the tutorial GitHub repo with the routing-in-react tag and is this code diff. You can run the app using theyarn start
command, and then you can navigate to
http://localhost:3000
and http://localhost:3000/post/0x123
to see the
various pages rendered.
Next, let’s wire up the queries.