使用useParams钩子在ReactJS链接中创建动态URL链接

Question

我正在创建一个应用程序，该应用程序将根据通过URL参数传入的id显示有关帖子的信息。由于某些原因，它没有显示页面，而是显示以下错误：

错误：钩子调用无效。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

1. React和渲染器的版本可能不匹配(例如React DOM(
2. 你可能违反了胡克规则
3. 同一应用程序中可能有多个React副本

我的代码如下：

// App.js --------- 
const App = () => {
return (
<div className="app">
<Router>
<NavBar />
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/ideas" component={Ideas} />
<Route path="/login" component={Login} />
<Route path="/ideas/:id" component={Idea} />
</Switch>
</Router>
</div>
);
};
//Idea.js --------- 
import React, { useState } from "react";
import { useParams } from 'react-router-dom'
const Idea = () => {
let { id } = useParams();
return <div>Id: {id}</div>
};
export default Idea;

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

Answer 1

如果从react router而不是react router-dom导入useParams，我认为它应该可以工作。这就是我的进口方式，我没有任何问题。

import { useParams } from 'react-router'