fix: route search hits through React Router

Render DocSearch hits with React Router links so Algolia's absolute URLs can be normalized to relative paths and selected without reloading the app.

Author: jderochervlk

__tests__/Search_.test.res

@@ -41,6 +41,14 @@ module ThrowsOnRender = {
   let make = (): React.element => failwith("search render exploded")
 }
 
+module CurrentPath = {
+  @react.component
+  let make = () => {
+    let location = ReactRouter.useLocation()
+    <span> {React.string((location.pathname :> string))} </span>
+  }
+}
+
 // ---------------------------------------------------------------------------
 // markdownToHtml
 // ---------------------------------------------------------------------------
@@ -230,6 +238,23 @@ test("getContentHtml prefers crawler snippet markup over plain content", async (
   )
 })
 
+test("hitComponent routes relative hit URLs through React Router", async () => {
+  await viewport(1440, 500)
+
+  let hit = makeHit(~type_=Lvl1, ~url="/docs/manual/api/stdlib/list/")
+
+  let screen = await render(
+    <ReactRouter.MemoryRouter initialEntries=["/"]>
+      <CurrentPath />
+      {Search.hitComponent({hit, children: React.null})}
+    </ReactRouter.MemoryRouter>,
+  )
+
+  await element(await screen->getByText("/"))->toBeVisible
+  await (await screen->getByText("Test Page"))->click
+  await element(await screen->getByText("/docs/manual/api/stdlib/list/"))->toBeVisible
+})
+
 test(
   "getContentHtml falls back to plain content when crawler hit has no snippet result",
   async () => {

src/components/Search.res

@@ -253,7 +253,7 @@ let hitComponent = ({hit, children: _}: DocSearch.hitComponent): React.element =
   let contentHtml = getContentHtml(hit)
   let isChild = isChildHit(hit)
 
-  <a href={hit.url}>
+  <ReactRouter.Link.String to=hit.url>
     <div className="DocSearch-Hit-Container">
       {isChild ? <Icon.DocTree /> : React.null}
       {isChild ? <Icon.DocHash /> : <Icon.DocPage />}
@@ -271,7 +271,7 @@ let hitComponent = ({hit, children: _}: DocSearch.hitComponent): React.element =
       </div>
       <Icon.DocSelect />
     </div>
-  </a>
+  </ReactRouter.Link.String>
 }
 
 module ErrorBoundary = {