I want to get id in url i tried both ways but i get an error can anyone help about the solution?

Error :

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM) You might be breaking the Rules of Hooks You might have more than one copy of React in the same app See

url: http://localhost:8080/passenger-update/16

Following my code:

class PassengerUpdate extends Component {

    componentDidMount() {
        let { id } = useParams();
        console.log(id);
    }

    render() {
        return (
            <div className="container">

            </div>
        );
    }
}

export default PassengerUpdate;

This Router Code

<Routes>
   <Route exact path="/passenger-update/:id" element={<PassengerUpdate/>}/>
</Routes>

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.13.13",
        "@popperjs/core": "^2.10.2",
        "axios": "^0.25.0",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1"
    },
    "dependencies": {
        "react-bootstrap": "^2.4.0",
        "react-router-dom": "^6.3.0"
    }
}

CodePudding user response：

useParams is a hook & hence can be used either inside a function component or another hook only.

1. You can split window.location.href using '/' to access the id, in componentDidMount. (recommended)

2. If you are using React Router version <= 5 use
   var PassengerUpdateWithRouter = withRouter(PassengerUpdate).
   This will make the match object (& params) availabe as a prop inside PassengerUpdate.

3. If you are using React Router 6, withRouter has been removed.
   i. Convert your class component to a function component. Now useParams will work. (not recommended for large components).
   ii. Create a higher order function component

function PassengerUpdateWithParams(Comp) {
    return (props)=> {
        var params = useParams();
        return <Comp {...props} params={params} />;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

See react-router-dom useParams() inside class component for more information, especially @MahanVahdani's answer & @k90mirzaei's comment (https://codesandbox.io/s/pedantic-jennings-l7qq93).