Adding links

Now that we have a site logo in the navigation bar, let’s add some links to pages around the site.

The Remix Link component

Traditionally, in a React app, you would use an a tag to create a link to another page.

However, in Remix, we use the Link component from @remix-run/react because it has several advantages:

• It can be set to pre-fetch the linked page’s data, so the page loads faster
• The Link component loads content without requiring a full page refresh
• It can incorporate “nested routes”, where a parent route can load data for a child route (we will cover this in a later tutorial)

Adding links to the navigation bar

Let’s start by adding a Link to the logo in the navigation bar. This will link back to the home page of the site.

Firstly, let’s import the Link component from @remix-run/react:

app/components/organisms/HeaderWithSearch.tsx

import { Link, useMatches } from '@remix-run/react'
import { SearchBar } from '../molecules/SearchBar'
import LoginOrUserDropdown from './LoginOrUserDropdown'
import logo from '~/assets/png/epic-news-logo.png'

Next, let’s wrap the logo and site title inside this Link component:

app/components/organisms/HeaderWithSearch.tsx

import { Link, useMatches } from '@remix-run/react'
import { SearchBar } from '../molecules/SearchBar'
import LoginOrUserDropdown from './LoginOrUserDropdown'
import logo from '~/assets/png/epic-news-logo.png'

export default function HeaderWithSearch() {
  const matches = useMatches()
  const isOnSearchPage = matches.find(m => m.id === 'routes/users+/index')
  const searchBar = isOnSearchPage ? null : <SearchBar status="idle" />

  return (
    <header className="dark:bg-dark-primary/10 bg-primary/10 py-6">
      <nav className="container flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
        <Link to="/">
          <div className="flex items-center gap-4">
            <img src={logo} alt="Epic News Logo" className="w-16" />
            <span className="text-sm text-foreground">Epic News</span>
          </div>
        </Link>
        <div className="ml-auto hidden max-w-sm flex-1 sm:block">
          {searchBar}
        </div>
        <div className="flex items-center gap-10">
          <LoginOrUserDropdown />
        </div>
        <div className="block w-full sm:hidden">{searchBar}</div>
      </nav>
    </header>
  )
}

Challenge

Adding a link to ‘News’

Now that we have a link to the home page, see if you can add a link to the ‘News’ page. This page doesn’t exist yet, but we will create it in a later tutorial.

The link should:

• be placed in the navigation bar, next to the logo
• have the text “News”
• link to the "news" route
• be styled however you like, but have a hover effect (e.g. the text colour changes)
• be created with the Remix Link component

Once you’ve added it, compare your solution against the one below:

app/components/organisms/HeaderWithSearch.tsx

import { Link, useMatches } from '@remix-run/react'
import { SearchBar } from '../molecules/SearchBar'
import LoginOrUserDropdown from './LoginOrUserDropdown'
import logo from '~/assets/png/epic-news-logo.png'

export default function HeaderWithSearch() {
  const matches = useMatches()
  const isOnSearchPage = matches.find(m => m.id === 'routes/users+/index')
  const searchBar = isOnSearchPage ? null : <SearchBar status="idle" />

  return (
    <header className="dark:bg-dark-primary/10 bg-primary/10 py-6">
      <nav className="container flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
        <Link to="/">
          <div className="flex items-center gap-4">
            <img src={logo} alt="Epic News Logo" className="w-16" />
            <span className="text-sm text-foreground">Epic News</span>
          </div>
        </Link>
        <div>
          <Link
            to="/news"
            className="text-sm font-semibold text-muted-foreground transition hover:text-foreground"
          >
            News
          </Link>
        </div>
        <div className="ml-auto hidden max-w-sm flex-1 sm:block">
          {searchBar}
        </div>
        <div className="flex items-center gap-10">
          <LoginOrUserDropdown />
        </div>
        <div className="block w-full sm:hidden">{searchBar}</div>
      </nav>
    </header>
  )
}

Click to reveal

The code above adds a simple link like so:

Customising the footer

Now that we’ve added links and a logo to the navigation bar, let’s customise the footer.

If you’ve been following along with the Epic News project, you’ll have the FooterMenuRight component from the app/components/organisms/Footer/FooterMenuRight.tsx file:

Challenge

You task is to customise the footer by adding the following:

• Replace the ‘Icon Here’ placeholder with the site logo that you designed in a previous tutorial
• A link to the home page via the site logo
• A link to the ‘News’ page
• Two more links to pages that don’t exist yet (e.g. ‘About’ and ‘Contact’)
• Style the links however you like, but ensure they have a hover effect and are consistent with the navigation bar
• A custom copyright message

All links must be created with the Remix Link component.

Good luck!

Summary

In this tutorial, we have:

• Learned about the Remix Link component
• Added a link to the home page in the navigation bar
• Added a link to the ‘News’ page in the navigation bar
• Customised the footer with links, a site logo and a copyright message

Assignment

📄 Assignment documentation

You will need to document all the changes that you have made to the site so far in this ‘User Interface’ section.

You should include:

• How you have imported components into the root.tsx file.
• Adding a navigation bar using the <HeaderWithSearch /> component.
• Adding a footer using the <FooterMenuRight /> component.
• Creating a logo for the site using Figma
• Exporting the logo as a PNG file
• Importing images into the project and using them in components
• Adding the logo to the navigation bar and footer
• Customising the position of the logo in the navigation bar with Tailwind CSS and flexbox
• Adding links to the navigation bar and footer using the Remix Link component
• Styling the links with Tailwind CSS and hover effects
• Customising the footer with links, a site logo and a copyright message

Useful links

• Remix Link component documentation
• Remix NavLink component
• Logo Design
• Importing images in React
• Tailwind CSS flexbox
• Tailwind CSS hover effects

What’s next?

In the next tutorial, we will explore custom components included with the Epic News starter project.

We will explore how you can use them ‘out of the box’ to create rich user experiences quickly on your site, and how to customise them to suit your needs.