0

I have a component Post that imports useParams() from react-router-dom. However, when I try to assign useparams() to a const to see the params I have it throws the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'basename')

Here is how I am importing an assigning the params:

import { BrowserRouter as useParams } from "react-router-dom";

const { params } = useParams();

Here is my Post component:

import { BrowserRouter as useParams } from "react-router-dom";

class Post extends React.Component {
  ...
 
  render() {
    const { params } = useParams();
    console.log(params)

    return(
      ...
    )
  }
}

export default Post;

I am using:

"react": "^18.2.0"
"react-router-dom": "^6.4.3"
"react-dom": "^18.2.0"
problems
  • 95
  • 1
  • 8
  • 1
    maybe import { BrowserRouter as useParams } from "react-router-dom"; to import { useParams } from 'react-router-dom'; – Neo Nov 20 '22 at 13:11
  • @Neo if I do that it raises another error `Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. ` – problems Nov 20 '22 at 13:25
  • Yes its because you can only use hooks inside functional component in my opinion you can make 2 things. First: convert your component to functional component Second: use HOC/wrapper component you can find an example in https://stackoverflow.com/questions/58548767/react-router-dom-useparams-inside-class-component – Neo Nov 20 '22 at 13:29

0 Answers0