Step-by-Step V1 Example

(Details about this example are on the overview page)

Steps:1234567891011121314

Step 1

This is our starting point. In production, we'd have built to this state in the same way that this example shows moving forward. Instead, I'm starting here to make the examples clearer.
The most important point with this approach is that the code is left in a working condition at the end of each step unless explicitly noted that it won't be.

File: routes/invoices.jsx

1import {
2  NavLink,
3  Outlet,
4} from "react-router-dom";
5import { getInvoices } from "../data";
6
7export default function Invoices() {
8  let invoices = getInvoices();
9
10  return (
11    <div style={{ display: "flex" }}>
12      <nav
13        style={{
14          borderRight: "solid 1px",
15          padding: "1rem",
16        }}
17      >
18        {invoices
19          .map((invoice) => (
20            <NavLink
21              style={({ isActive }) => ({
22                display: "block",
23                margin: "1rem 0",
24                color: isActive ? "red" : "",
25              })}
26              to={`/invoices/${invoice.number}`}
27              key={invoice.number}
28            >
29              {invoice.name}
30            </NavLink>
31          ))}
32      </nav>
33      <Outlet />
34    </div>
35  );
36}