[Bug]: Rendering solo NavLink with <MemoryRouter> causes error

[MrMamen]

What version of React Router are you using?

6.20.0

Steps to Reproduce

Starting from 6.19.0 I get an error with using the combination relative="path" and an absolute path in the to-field of a NavLink. A real life usage is then the to-attribute is an input parameter for a wrapper-class.

import { render } from '@testing-library/react';
import React from 'react';
import { MemoryRouter, NavLink } from 'react-router-dom';

describe('Testing navlink', () => {
  it('should not fail', () => {
    render(
      <MemoryRouter>
        <NavLink to='any/thing/here' relative='path'>
          Test
        </NavLink>
      </MemoryRouter>
    );
  });
});

Expected Behavior

The testcase should not fail

Actual Behavior

 FAIL  src/components/Navigation/test/navlink.unit.test.tsx
  Testing navlink
    ✕ should not fail (126 ms)

  ● Testing navlink › should not fail

    TypeError: Cannot read properties of undefined (reading 'replace')

       5 | describe('Testing navlink', () => {
       6 |   it('should not fail', () => {
    >  7 |     render(
         |           ^
       8 |       <MemoryRouter>
       9 |         <NavLink to='any/thing/here' relative='path'>
      10 |           Test

      at Object.resolveTo (node_modules/@remix-run/router/utils.ts:1206:8)
      at node_modules/react-router/lib/hooks.tsx:316:7
      at mountMemo (node_modules/react-dom/cjs/react-dom.development.js:17225:19)
      at Object.useMemo (node_modules/react-dom/cjs/react-dom.development.js:17670:16)
      at Object.useMemo (node_modules/react/cjs/react.development.js:1650:21)
      at Object.useResolvedPath (node_modules/react-router/lib/hooks.tsx:314:16)
      at NavLinkWithRef (node_modules/react-router-dom/index.tsx:1003:16)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18)
      at updateForwardRef (node_modules/react-dom/cjs/react-dom.development.js:19226:20)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21636:16)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5)
      at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7)
      at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25850:20)
      at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25750:22)
      at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
      at act (node_modules/react/cjs/react.development.js:2582:11)
      at node_modules/@testing-library/react/dist/act-compat.js:46:25
      at renderRoot (node_modules/@testing-library/react/dist/pure.js:161:26)
      at render (node_modules/@testing-library/react/dist/pure.js:247:10)
      at Object.<anonymous> (src/components/Navigation/test/navlink.unit.test.tsx:7:11)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)

[brophdawg11]

This looks like it's an issue when rendering a Link/NavLink outside of any Route context, so for now you could wrap those in <Route element={<NavLink />} /> as a workaround. I pushed a fix to allow this in #11062 👍

[bbtools-ps]

This workaround failed for me and I came up with this instead (you can replace BrowserRouter with MemoryRouter):

<BrowserRouter>
  <Routes>
     <Route
      path='/'
      element={<NavLink />}
      />
   </Routes>
</BrowserRouter>

[brophdawg11]

Oops - yeah sorry I thought that was assumed - a <Route> must be inside a <Routes> when using MemoryRouter/BrowserRouter :)

[phoskee]

Same issue? link

[brophdawg11]

Same issue? link

@phoskee Not quite - you need to be including a Router component somewhere in order to use Link. Either RouterProvider, BrowserRouter, MemoryRouter, or HashRouter. See https://reactrouter.com/en/main/routers/picking-a-router for documentation on the different routers available.

[brophdawg11]

This is resolved by #11062 and will be available in the next release

[github-actions]

🤖 Hello there,

We just published version 6.21.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 6.21.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!