Step-by-Step V1 Example

(Details about this example are on the overview page)

Steps:1234567891011121314

Step 2

Add `useSearchParams` to the top `import` statement.
You won't see any changes with this addition. It's purpose is to setup for the next steps.

File: routes/invoices.jsx

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