Use React Router to build a message board app. A routing library in the UI interprets the URL path and renders an appropriate page for that path.
/
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.
src/components
directory, and then components for the home page
(components/home.tsx
) and posts (components/post.tsx
), with the following
file content:
App.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:
yarn 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.