Adding breadcrumbs
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:35] Heading breadcrumbs. The last thing we would like to show to our users is the breadcrumbs on our post pages. Breadcrumbs will be a component that will contain a link path from the main page to the current page. In our case, it will show links to the main page and the category that the current post belongs to. Let's create the breadcrumbs component. New folder breadcrumbs. Inside of it, create the styles. Styles.ts. Here we define a container. It's a styled nav where we define margin right for all the immediate children.
[00:36 - 01:27] All of them will have 0.3 em. In the same folder, create new file, breadcrumbs.tsx. First, define the props. Breadcrumbs. Props is an object and the only prop it will have is going to be post of type post. Define the breadcrumbs component. Expert, const, breadcrumbs . Get the post from the props. Define the props type and render the layout. Everything is going to be wrapped into a container. And here we'll render two links. The link to the main page we're under a same front and graph should be root. And then render another one that will lead to the category that we'll get from the post. And this link should say post category. Add a span. It should have a small arrow that will have between the links.
[01:28 - 01:48] Add an index file and re-expert everything from breadcrumbs. Expert everything from breadcrumbs. Now go to post body, post, post body and render the breadcrumbs component above the title. Breadcrumbs. And we need to pass the post to it. Post equals post. That 's it.
[01:49 - 01:57] Now our post pages will have breadcrumbs. Let's open any post. It should have front leading to the main page and category link leading to a category. Good job!