Adding Links in the Navbar

Now that we have our first route set up, let’s add a couple of links to the navbar of our app. These will direct users to login or signup for our app when they first visit it.

Replace the App function component in src/App.tsx with the following.

function App() {
  return (
    <div className="App container py-3">
      <Navbar collapseOnSelect bg="light" expand="md" className="mb-3 px-3">
        <Navbar.Brand className="fw-bold text-muted">Scratch</Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse className="justify-content-end">
          <Nav>
            <Nav.Link href="/signup">Signup</Nav.Link>
            <Nav.Link href="/login">Login</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Routes />
    </div>
  );
}

This adds two links to our navbar inside the Nav Bootstrap component. The Navbar.Collapse component ensures that on mobile devices the two links will be collapsed.

We also added a link to the Scratch logo. It links back to the homepage of our app.

And let’s include the Nav component in the header.

Add the following import to the top of your src/App.tsx.

import Nav from "react-bootstrap/Nav";

Now if you flip over to your browser, you should see the links in our navbar.

Unfortunately, when you click on them they refresh your browser while redirecting to the link. We need it to route it to the new link without refreshing the page since we are building a single page app.

To fix this we need a component that works with React Router and React Bootstrap called React Router Bootstrap. It can wrap around your Navbar links and use the React Router to route your app to the required link without refreshing the browser.

Run the following command in the packages/frontend/ directory.

$ npm install react-router-bootstrap
$ npm install -D @types/react-router-bootstrap

We will now wrap our links with the LinkContainer. Replace the App function component in your src/App.tsx with this.

function App() {
  return (
    <div className="App container py-3">
      <Navbar collapseOnSelect bg="light" expand="md" className="mb-3 px-3">
        <LinkContainer to="/">
          <Navbar.Brand className="fw-bold text-muted">Scratch</Navbar.Brand>
        </LinkContainer>
        <Navbar.Toggle />
        <Navbar.Collapse className="justify-content-end">
          <Nav activeKey={window.location.pathname}>
            <LinkContainer to="/signup">
              <Nav.Link>Signup</Nav.Link>
            </LinkContainer>
            <LinkContainer to="/login">
              <Nav.Link>Login</Nav.Link>
            </LinkContainer>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Routes />
    </div>
  );
}

Let’s also import it.

Add this to the top of your src/App.tsx.

import { LinkContainer } from "react-router-bootstrap";

We are doing one other thing here. We are grabbing the current path the user is on from the window.location object. And we set it as the activeKey of our Nav component. This’ll highlight the link when we are on that page.

<Nav activeKey={window.location.pathname}>

And that’s it! Now if you flip over to your browser and click on the login link, you should see the link highlighted in the navbar. Also, it doesn’t refresh the page while redirecting.

You’ll notice that we are not rendering anything on the page because we don’t have a login page currently. We should handle the case when a requested page is not found.

Next let’s look at how to tackle handling 404s with our router.