This episode is for members only

Sign up to access "Build a Trello Clone With Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
27. Linking to boards

Transcript

00:00
For our first improvement, when we went ahead and created out our board index,
00:03
we didn't actually hook up any of these boards to link through. Now that we've got a name for them, let's very quickly do that now. Might be pretty obvious, but I'll include it anyway. OK, so for each of these now, we could either wrap these in an anchor and have this div inside,
00:18
or we could just set each of these directly to an anchor. And of course, inside of here, we want to output the route that goes through to the board show. And then we just want to pass the board directly into here. So if you haven't done that before and you didn't know how to do that,
00:32
now each of your boards will be clickable. And when obviously you click through to these, you'll be able to go and see each of the boards that you've created. And yeah, sure enough, head back to your dashboard.

Episode summary

In this episode, we're taking care of a simple but important detail: making the list of boards in our board index actually clickable. Previously, we built out the board index, but none of the board names or cards were linked anywhere—kind of pointless if you want to navigate!

So, we're fixing that by turning each board display into a link that takes you to the specific board's page. We talk through a couple of different ways you might want to set this up—either wrapping the board display in an anchor tag or making it an anchor element directly. Then, we show how you'd hook up the route so that clicking on a board takes you to its show page with the correct data.

Once you do this, every board in your dashboard becomes clickable, making it super easy for users (and you!) to navigate to any board and view its details. It's a quick and straightforward improvement, but it seriously enhances the user experience.

Episode discussion

No comments, yet. Be the first!