Jon Rumsey

An online markdown blog and knowledge repository.

Project maintained by nojronatron Hosted on GitHub Pages — Theme by mattgraham

Creating a Navbar in React with Routing Notes

Key takeaways and code samples from the video.

Example Navbar Without Router

Is a header with a site title and nav items in it.

  1. Create a functional component called Navbar
  2. In the return statement return a <nav> element enclosing an anchor tag to root for the title of the site
  3. Create an unordered list
  4. Add list items that contain the name and href to the target page
  5. Once the navbar is done create pages to navigate to

Adding Nav Logic

In the top-level component (e.g. App) add window.location to get the URL of the page that was navigated to.

Review Console output, Location member, to see properties href, origin, and pathname.

Using a switch statement on window.location.pathname and set cases for each literal path:

import Navbar from "./Navbar.js";
import Home from "./pages/Home.js";
import Contentpage from "./pages/Contentpage.js";
import About from "./pages/About.js";

function App() {
  let Component;
  switch (window.location.pathname) {
    case "/":
      Component = Home;
      break
    case "/contentpage":
      Component = Contentpage;
      break
    case "/about":
      Component = About;
      break
  }
  return (
    <>
    <Navbar />
    <Component />
    </>
  )
}

Make the currently selected Nav item highlighted after clicking:

  1. Create a function (rfc) called CustomLink
  2. Configure for 3 parameters, and put them in braces e.g. function CustomLink({href, children, ...props}) { return() }
  3. Add a path variable: const path = window.location.pathname
  4. Configure the list item tag in the return statement className attribute to be "active" or empty string on path === href
  5. The LI child anchor tag will have attributes as so: href={href} {...props}
  6. Anchor tag content will be {children}

Note: This logic will need to be replaced if using react-router-dom and useMatch hook or useResolvedPath hook.

Use UL and LI elements to create the set of links for the nav bar.

Add styling for nav elements:

.nav {
  background: #color;
  color: #opposite-color;
  display: flex;
  justify-content: space-between;
  align-items: center;  //  try 'stretch' if alignment still isn't quite right
  gap: 2rem;  // space between
  padding: 0 1rem;  // space to edges
}

Prettify the links:

.nav ul {
  padding: 0;
  margin: 0;
  list-style: none; // eliminate extra spacing and the bullet icon
  display: flex;
  gap: 1rem;
}

Style the nav anchor tag:

.nav a {
  color: inherit;
  text-decoration: none;
  height: 100%; //  ensure link is as tall as its container content area
  display: flex;
  align-items: center;
  padding: .25rem;
}

Style the links so they change appearance when hovered vs. non-hovered:

.nav li.active {
  background-color: #some-background-color; //  when selected or tabbed changes the background color for contrast
}

.nav li:hover {
  background-color: #different-background-color;  //  when hovered alters the background color for contrast
}

Using React-Router

  1. npm install react-router-dom
  2. Import Browser Router in index.js: import { BrowserRouter } from 'react-router-dom';
  3. Wrap the entire App with <BrowserRouter> open and close elements.
  4. Import BrowserRouter 'Route, and Routes' components App.js.
  5. Any custom routing logic created in App.js can be removed.
  6. After <Navbar /> component in return fragment, include <Routes> and <Route> tags (see example code below).
  7. Add additional <Route path="" element=""> tags and attributes for each navigation route desired.
  8. Replace any Anchor tags in the Navbar component with a <Link> Component from react-router-dom;
  9. Replace href with to anywhere an Anchor has been replaced with a Link component.
function App() {
  return (
    <>
      <Navbar />
      <div className="container">
        <Routes>
          <Route path="/" element={ <Home /> } />
        </Routes>
      </div>
    </>
  );
}

Utilize React Router Matching

  1. In Navbar component import 'useMatch' and 'useResolvedPath' hooks.
  2. Write useResolvedPath in place of window.location.pathname.
  3. Pass-in the to property to the CustomLink function and bring it down to the useResolvedPath() parameter.
  4. Assign useRespovedPath(to) to a variable within the CustomLink function
  5. Assign useMatch({path: resolvedPath.pathname, end: true}) result to another variable within the CustomLink function.
  6. Note: end: true forces matching to occur through an entire path and may/not be necessary.

Now only the Component that is navigated to re-renders fully, the rest of the page does not unless there are changees like :active and :hover.

Absolute and Relative Paths

An absolute path is one that describes the path location from the root.

A relative path describes only the page name itself, ignoring parent components of the full path.

Pages to Navigate To

Suggestions:

Return to conted-index.md