TypeError: Object(...) is not a function while using React Hooks

Question

So I am trying to implement routing in my Weather App project , What I am trying to achieve is that when I click on cityname , it should be displayed in another app. But somehow I get below error TypeError: Object(...) is not a function Below is my files :

My 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>
    </>
  );
};

My Next Component file when:

import React, { useParams } from "react";

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

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

export default DataNaman;

Answer 1

There is no useParams in the react library?

i expect you use react-router? then you should import the useParams from there.

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