Step-by-Step V1 Example

(Details about this example are on the overview page)

Steps:1234567891011121314

Step 3

Now that `useSearchParams` is imported, the next step is to setup the variables to use it and set it.
This won't cause any visible changes on the page either.

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  let [searchParams, setSearchParams] = useSearchParams();
11
12  return (
13    <div style={{ display: "flex" }}>
14      <nav
15        style={{
16          borderRight: "solid 1px",
17          padding: "1rem",
18        }}
19      >
20        {invoices
21          .map((invoice) => (
22            <NavLink
23              style={({ isActive }) => ({
24                display: "block",
25                margin: "1rem 0",
26                color: isActive ? "red" : "",
27              })}
28              to={`/invoices/${invoice.number}`}
29              key={invoice.number}
30            >
31              {invoice.name}
32            </NavLink>
33          ))}
34      </nav>
35      <Outlet />
36    </div>
37  );
38}