remove react router (#1988)

Author: ChristopherChudzicki

frontends/main/src/components/ChannelMenu/ChannelMenu.test.tsx

@@ -1,7 +1,5 @@
 import React from "react"
 import { screen } from "@testing-library/react"
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { BrowserRouter } from "react-router-dom"
 
 import ChannelMenu from "./ChannelMenu"
 import { urls } from "api/test-utils"
@@ -17,9 +15,7 @@ describe("ChannelMenu", () => {
     )
 
     renderWithTheme(
-      <BrowserRouter>
-        <ChannelMenu channelType={channel.channel_type} name={channel.name} />
-      </BrowserRouter>,
+      <ChannelMenu channelType={channel.channel_type} name={channel.name} />,
     )
     const dropdown = await screen.findByRole("button")
     await user.click(dropdown)

frontends/main/src/page-components/ChannelDetails/ChannelDetails.test.tsx

@@ -2,7 +2,6 @@ import React from "react"
 import { screen } from "@testing-library/react"
 import { ChannelDetails } from "./ChannelDetails"
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { BrowserRouter } from "react-router-dom"
 import { urls } from "api/test-utils"
 import { renderWithTheme, setMockResponse } from "@/test-utils"
 import { channels as factory } from "api/test-utils/factories"
@@ -17,11 +16,7 @@ describe("ChannelDetails", () => {
       urls.channels.details(channel.channel_type, channel.name),
       channel,
     )
-    renderWithTheme(
-      <BrowserRouter>
-        <ChannelDetails channel={channel} />
-      </BrowserRouter>,
-    )
+    renderWithTheme(<ChannelDetails channel={channel} />)
     const channelData = channel as unknown as Record<string, unknown>
     const unitDetail = channelData.unit_detail as unknown as Record<
       string,
@@ -49,11 +44,7 @@ describe("ChannelDetails", () => {
       urls.channels.details(channel.channel_type, channel.name),
       channel,
     )
-    renderWithTheme(
-      <BrowserRouter>
-        <ChannelDetails channel={channel} />
-      </BrowserRouter>,
-    )
+    renderWithTheme(<ChannelDetails channel={channel} />)
 
     expect(screen.getByTestId("unit-details").firstChild).toHaveTextContent(
       "Offerings",

frontends/main/src/page-components/SearchDisplay/SearchDisplay.tsx

@@ -543,22 +543,6 @@ interface SearchDisplayProps {
   clearAllFacets: UseResourceSearchParamsResult["clearAllFacets"]
   toggleParamValue: UseResourceSearchParamsResult["toggleParamValue"]
   showProfessionalToggle?: boolean
-  /**
-   * NOTE: This is passed from parent, rather than obtained via useSearchParams,
-   * because of quirks with react-router's useSearchParams hook.
-   *
-   * Multiple calls to React Router's useSearchParam hook do not use current
-   * values for the search params.
-   * See https://github.com/remix-run/react-router/issues/9757 for details.
-   *
-   * This is partially addressed by `@mitodl/course-search-utils`, which exports
-   * a wrapper around `useSearchParams`: subsequent calls to `setSearchParams`
-   * DO use the current value, with one caveat: The setSearchParams function
-   * must be from the same "instance" of `useSearchParams`.
-   *
-   * Because of this, we pass the setSearchParams function from the parent
-   * rather than from a new "instance" of `useSearchParams`.
-   */
   setSearchParams: UseResourceSearchParamsProps["setSearchParams"]
   resultsHeadingEl: React.ElementType
   filterHeadingEl: React.ElementType

frontends/ol-components/package.json

@@ -36,8 +36,6 @@
     "ol-utilities": "0.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router": "^6.22.2",
-    "react-router-dom": "^6.22.2",
     "react-select": "^5.7.7",
     "react-share": "^5.0.3",
     "react-slick": "^0.30.2",

frontends/ol-components/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -3,13 +3,6 @@ import { screen } from "@testing-library/react"
 import { Breadcrumbs } from "./Breadcrumbs"
 import { renderWithTheme } from "../../test-utils"
 
-// Mock react-router-dom's Link so we don't need to set up a Router
-jest.mock("react-router-dom", () => {
-  return {
-    Link: jest.fn((props) => <a href={props.to}>{props.children}</a>),
-  }
-})
-
 describe("Breadcrumbs", () => {
   test.each([
     { ancestors: [{ href: "/home", label: "Home" }] },

frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.test.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-import { BrowserRouter } from "react-router-dom"
 import { screen, within } from "@testing-library/react"
 import { LearningResourceListCard } from "./LearningResourceListCard"
 import type { LearningResourceListCardProps } from "./LearningResourceListCard"
@@ -10,11 +9,7 @@ import { getByImageSrc } from "ol-test-utilities"
 import { renderWithTheme } from "../../test-utils"
 
 const setup = (props: LearningResourceListCardProps) => {
-  return renderWithTheme(
-    <BrowserRouter>
-      <LearningResourceListCard {...props} />
-    </BrowserRouter>,
-  )
+  return renderWithTheme(<LearningResourceListCard {...props} />)
 }
 
 describe("Learning Resource List Card", () => {
@@ -118,13 +113,11 @@ describe("Learning Resource List Card", () => {
     const onAddToUserListClick = jest.fn()
 
     renderWithTheme(
-      <BrowserRouter>
-        <LearningResourceListCard
-          resource={resource}
-          onAddToLearningPathClick={onAddToLearningPathClick}
-          onAddToUserListClick={onAddToUserListClick}
-        />
-      </BrowserRouter>,
+      <LearningResourceListCard
+        resource={resource}
+        onAddToLearningPathClick={onAddToLearningPathClick}
+        onAddToUserListClick={onAddToUserListClick}
+      />,
     )
 
     const addToLearningPathButton = screen.getByLabelText(

frontends/ol-components/src/components/Link/Link.tsx

@@ -109,7 +109,7 @@ const BaseLink = ({
 
 /**
  * A styled link. By default, renders a medium-sized black link using the Link
- * component from `react-router`. This is appropriate for in-app routing.
+ * component from `next/link`. This is appropriate for in-app routing.
  *
  * If you need to force a full-page reload, e.g., for login/logout links, use
  * set `nativeAnchor={true}`.

frontends/ol-components/src/components/Lists/ListItemLink.tsx

@@ -7,7 +7,7 @@ import Link from "next/link"
 type ListItemLinkProps = ListItemButtonProps<"a">
 
 /**
- * A ListItemButton that uses a Link component from react-router-dom.
+ * A ListItemButton that uses a Link component from next/link.
  *
  * The purpose is to make the entire clickable area of a ListItem a link. Note
  * that `ListItem` should have `disablePadding` when it contains a `ListItemLink`

frontends/ol-components/src/components/SimpleMenu/SimpleMenu.test.tsx

@@ -3,22 +3,19 @@ import { screen } from "@testing-library/react"
 import user from "@testing-library/user-event"
 import { SimpleMenu } from "./SimpleMenu"
 import type { SimpleMenuItem } from "./SimpleMenu"
-import type { LinkProps } from "react-router-dom"
 import { renderWithTheme } from "../../test-utils"
 
-// Mock react-router-dom's Link so we don't need to set up a Router
+// Mock next/link's Link so we don't need to set up a Router
 jest.mock("next/link", () => {
   return {
     __esModule: true,
-    default: React.forwardRef<HTMLAnchorElement, LinkProps>(
-      jest.fn(({ children, ...props }, ref) => {
-        return (
-          <a {...props} ref={ref} data-react-component="next/link">
-            {children}
-          </a>
-        )
-      }),
-    ),
+    default: jest.fn(({ children, ...props }) => {
+      return (
+        <a {...props} data-react-component="next/link">
+          {children}
+        </a>
+      )
+    }),
   }
 })