[Bug]: Cannot read properties of undefined (reading 'pathname'). React Router 6

[olegKusov]

What version of React Router are you using?

6.1.1

Version of history package: 5.1

Steps to Reproduce

I'm using useNavigate, useHistory, useLocation, , and maybe something else.

Expected Behavior

No error

Actual Behavior

[timdorr]

Can you share a code example?

[dmathijs]

@olegKusov are you using Router or BrowserRouter?

[sumeyradavran]

I am having the same problem but I am not sure what is causing. I tried to create the error on sandbox but I had no luck.
What version of React Router are you using?
6.1.1

Version of history package: 5.1

I am using HistoryRouter like described #8264 (comment)

If I change it to BrowserRouter it works but I need to pass history object to use it outside of components.

It happens when I navigate through sidebar with useNavigate or go back and forward with browser.

[timdorr]

Can someone with this issue please post a code example? Preferably on Stackblitz or Codesandbox.

I'm not sure how it's happening, but the history instance you're passing in doesn't have a location property. I need to see the code example so we can trace why it doesn't have that property.

[olegKusov]

HistoryRouter

I'll try to reproduce this error.

[nghaosiong98]

What version of React Router are you using?
6.2.1
Version of history package: 5.2.0

I managed to fix this issue by rm -rf node_modules yarn.lock && yarn. Basically reinstall all the packages.

[timdorr]

Without a reproduction, this is likely due to an incorrect version of history being applied somewhere. Until someone can point to the specific cause, I don't think this is an issue with the library itself.

[dan-cooke]

For anyone stumbling upon this.

I encountered this error when converting my Next js Link components over to remix Link

Make sure you aren't an idiot like me, and check you are using to instead of href

[tyuen]

For anyone stumbling upon this.

I encountered this error when converting my Next js Link components over to remix Link

Make sure you aren't an idiot like me, and check you are using to instead of href

Today I discovered that I am an idiot. Thanks for the tip.

[Choyeongdeok]

import {useLocation} from 'react-router-dom' // v6.2.1

const {pathname, search} = useLocation()

Then got an error
-> Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

[WalterOkumu]

Hi,
I'm using "react-router-dom": "^6.3.0"

Here's my code:

index.js:

import App from './App'
import { createRoot } from 'react-dom/client'
import { Router as BrowserRouter } from 'react-router-dom'

const container = document.getElementById('app')
const root = createRoot(container)

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
  )

App,js

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import HomePage from './pages/home'
import LoginPage from './pages/login'
import ListPage from './pages/list'
import NewPage from './pages/new'
import SinglePage from './pages/single'
import New from './pages/new'

const App = () => {
  return (
    <div>
      <Routes>
        <Route path='/'>
          <Route index element={<HomePage />} />
          <Route path='login' element={<LoginPage />} />
          <Route path='users'>
            <Route index element={<ListPage />} />
            <Route path=':userId' element={<SinglePage />} />
            <Route path='new' element={<NewPage />} />
          </Route>

        </Route>
      </Routes>
    </div>
  )
}

export default App

Errors are as follows:
Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
at Router (components.tsx:197:1)
at renderWithHooks (react-dom.development.js:16141:1)
at mountIndeterminateComponent (react-dom.development.js:20838:1)
at beginWork (react-dom.development.js:22342:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
at invokeGuardedCallback (react-dom.development.js:4270:1)
at beginWork$1 (react-dom.development.js:27243:1)
at performUnitOfWork (react-dom.development.js:26392:1)
at workLoopSync (react-dom.development.js:26303:1)
react-dom.development.js:18525 The above error occurred in the component:

at Router (http://localhost:3000/static/js/bundle.js:39492:15)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18525
react-dom.development.js:26740 Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
at Router (components.tsx:197:1)
at renderWithHooks (react-dom.development.js:16141:1)
at mountIndeterminateComponent (react-dom.development.js:20838:1)
at beginWork (react-dom.development.js:22342:1)
at beginWork$1 (react-dom.development.js:27219:1)
at performUnitOfWork (react-dom.development.js:26392:1)
at workLoopSync (react-dom.development.js:26303:1)
at renderRootSync (react-dom.development.js:26271:1)
at recoverFromConcurrentError (react-dom.development.js:25689:1)
at performConcurrentWorkOnRoot (react-dom.development.js:25589:1)

Here's my git --> https://github.com/WalterOkumu/react-admin-tutorial

[zhifou]

I have encountered this problem, because of I use import { ConnectedRouter } from 'connected-react-router';
After I remove ConnectedRouter component, problem is solved.

[anon-r-7]

Experiencing the same behavior on 6.2.1 and 6.1.0. Anyone else who experience this have a solution or better way to debug? To the best of my knowledge I've followed the upgrade guide. Not much to go off of based on the genericness of the error.

index.jsx as follows:

import React from 'react'
import { render } from 'react-dom'
import { Router } from 'react-router-dom'
import { App } from './App'

render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
)

Error as follows:

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
    at Router (components.tsx:197:5)
    at renderWithHooks (react-dom.development.js:14985:18)
    at mountIndeterminateComponent (react-dom.development.js:17811:13)
    at beginWork (react-dom.development.js:19049:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
    at beginWork$1 (react-dom.development.js:23964:7)
    at performUnitOfWork (react-dom.development.js:22776:12)
    at workLoopSync (react-dom.development.js:22707:5)
Router  @ components.tsx:197
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback2 @ react-dom.development.js:3945
invokeGuardedCallbackDev  @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync  @ react-dom.development.js:22707
renderRootSync  @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates  @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer  @ react-dom.development.js:26020
render  @ react-dom.development.js:26103
(anonymous) @ index.jsx:6

[tysepa]

Try to remove node-modules and do npm install

[Pettysc]

Maybe you could refer to this article : https://bobbyhadz.com/blog/react-cannot-read-property-pathname-of-undefined