TypeError: Object(...) 在使用 React Hooks 时不是函数

Question

所以我试图在我的 Weather App 项目中实现路由，我试图实现的是当我点击 cityname 时，它​​应该显示在另一个应用程序中。但不知何故我得到以下错误TypeError: Object(...) is not a function 下面是我的文件：

我的 App.js

   const App = () => {
  return (
    <>
      <Container>
        <Switch>
          <Route exact path="/">
            <Header />
            <WeatherData />
          </Route>
          <Route exact path="/cities">
            <Header />
            <Cities />
          </Route>
          <Route path="/cities/:val" component={DataNaman}/>
        </Switch>
      </Container>
    </>
  );
};

我的下一个组件文件在以下情况下：

import React, { useParams } from "react";

const DataNaman = () => {
  debugger;
  let { val } = useParams();

  return (
    <>
      <h1>Naman</h1>
    </>
  );
};

export default DataNaman;

Answer 1

useParams反应库中没有吗？

我希望你使用react-router？那么你应该useParams从那里导入。

import React from "react";
import { useParams } from "react-router-dom";