React dev warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

[morremeyer]

Describe the bug

We are nesting two links, which is a violation of the HTML 5 spec.

Outer:

frontend/src/components/BudgetSwitch.tsx

Line 85 in 0a1b031

<Link

Inner:

frontend/src/components/BudgetSwitch.tsx

Line 108 in 0a1b031

<Link

This leads to errors in the console when developing:

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
a
LinkWithRef@http://localhost:3000/node_modules/.vite/deps/react-router-dom.js?v=974dd5ae:4885:7
a
LinkWithRef@http://localhost:3000/node_modules/.vite/deps/react-router-dom.js?v=974dd5ae:4885:7
li
ul
div
BudgetSwitch@http://localhost:3000/src/components/BudgetSwitch.tsx:35:17
RenderedRoute@http://localhost:3000/node_modules/.vite/deps/react-router-dom.js?v=974dd5ae:3656:7
Outlet@http://localhost:3000/node_modules/.vite/deps/react-router-dom.js?v=974dd5ae:4024:20
div
div
main
div
div
Layout@http://localhost:3000/src/components/Layout.tsx:42:16
RenderedRoute@http://localhost:3000/node_modules/.vite/deps/react-router-dom.js?v=974dd5ae:3656:7
Routes@http://localhost:3000/node_modules/.vite/deps/react-router-dom.js?v=974dd5ae:4090:7
Router@http://localhost:3000/node_modules/.vite/deps/react-router-dom.js?v=974dd5ae:4038:7
BrowserRouter@http://localhost:3000/node_modules/.vite/deps/react-router-dom.js?v=974dd5ae:4778:7
App@http://localhost:3000/src/App.tsx:48:31