TypeError: Object(...) is not a function while using 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

react 库中没有useParams？

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

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