react get id from url with component

Question

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"
    }
}

I get the id value without the class method but I can't get it like this. — JFeel, Jul 07 '22 at 16:30
That's your React version. Which version of "React Router" are you using ? The latest is 6. Check your package.json if you aren't sure. — Nice Books, Jul 07 '22 at 16:30
Does this answer your question? [react-router-dom useParams() inside class component](https://stackoverflow.com/questions/58548767/react-router-dom-useparams-inside-class-component) — Alejandro, Jul 07 '22 at 16:39
Unfortunately when I use withRouter "'withRouter' passed (transmitted as 'withRouter') not found in 'react-router-dom'" — JFeel, Jul 07 '22 at 16:44

Nice Books · Accepted Answer · 2022-07-08T09:37:34.677

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

You can split window.location.href using '/' to access the id, in componentDidMount. (recommended)
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.
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 withParams(Comp) {
    return (props)=> {
        var params = useParams();
        return <Comp {...props} params={params} />;
    }
}

var PassengerUpdateWithParams = withParams(PassengerUpdate);
// PassengerUpdateWithParams should replace PassengerUpdate' usage

<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).

I applied what you said, but I couldn't find a solution, I'm a beginner in react js. Could you compile the codes with the code I shared? — JFeel, Jul 07 '22 at 17:00
Which solution did you try ? Try the 1st one `window.location.href`. — Nice Books, Jul 07 '22 at 17:04

react get id from url with component

1 Answers1