react get id from url with component

Question

我想在url中获取id，我尝试了两种方法，但我得到了一个错误，有人可以帮助解决方案吗？

错误：

错误:无效的挂钩调用。钩子只能在函数组件的主体内部被调用。以下原因之一可能会导致这种情况:

您可能有不匹配的React和渲染器版本（如React DOM）。您可能违反了挂钩规则。同一应用程序中可能有多个React副本。请参阅

网址： http://localhost:8080/passenger-update/16

以下是我的代码：

class PassengerUpdate extends Component {

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

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

            </div>
        );
    }
}

export default PassengerUpdate;

此路由器代码

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

Answer 1

useParams 是一个钩子

> < li>

您可以在< code>componentDidMount中使用“/”访问id来拆分< code > window . location . href 。(推荐)

如果您使用React路由器版本

如果您使用的是 React Router 6，则 withRouter 已被删除。
i. 将类组件转换为函数组件。现在使用参数将起作用。（不建议用于大型组件）。
ii. 创建高阶函数组件

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>