TypeError: Cannot read property 'location' of undefined react error on using 'window'

Question

Error when using the following code in Reactjs with MaterialUI library

<List>
    <ListItem button onClick={()=> {window.location.href = '/project'}}>
      <ListItemText primary ='Project'/>
    </ListItem>
  </List>

error is as following

Uncaught TypeError: Cannot read property 'location' of undefined
at onClick (Side.js:79)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:414)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at forEachAccumulated (react-dom.development.js:3259)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21871)
at batchedEventUpdates (react-dom.development.js:795)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at discreteUpdates$1 (react-dom.development.js:21887)
at discreteUpdates (react-dom.development.js:806)
at dispatchDiscreteEvent (react-dom.development.js:4168

I am unable to find the cause of the error and any alternate way. Please suggest, Thanks

Answer 1

Not sure what the issue is if I'm being completely honest but you could try this:

Outside of render function:

goToProject() {
    window.location.href = '/project';
}

In render:

<List>
    <ListItem button onClick={this.goToProject}>
      <ListItemText primary ='Project'/>
    </ListItem>
  </List>

Answer 2

onClick={()=> {window?.location.href = '/project'}}

Change onClick function like this and try to debug and see what window object returns, also if you use server side rendering import window object through ssr-window npm package.