[FIXED] How can i solve this problem with history?

Issue

TypeError: (0 , history_history__WEBPACK_IMPORTED_MODULE_6_.default) is not a function

My history.js file

import { createBrowserHistory } from 'history';
export default createBrowserHistory({
    forceRefresh: true
});

And the usage

<Button
  color="info"
  onClick={() => {
    console.log(userDeleted);
    history("/associated", {
      state: {
        devices: userDeleted.devices,
        email: userDeleted.email
      }
    });
  }}
  sx={{
    boxShadow: 2,
    bgcolor: '#2A293D',
    borderRadius: '2px'
  }}
>
  View devices
</Button>

I don't understand why it isn't working.

I tried some options but nothing was helpful, this is how my page look for now

Solution

history is an object, not a function. You likely meant to call history.push or history.replace.

Example:

<Button
  color="info"
  onClick={() => {
    history.push(
      "/associated",
      {
        state: {
          devices: userDeleted.devices,
          email:userDeleted.email
        }
      }
    );
  }}
  sx={{
    boxShadow: 2,
    bgcolor: '#2A293D',
    borderRadius: '2px'
  }}
>
  View devices
</Button>

Answered By - Drew Reese
Answer Checked By - - David Goodson (ReactFix Volunteer)