How to use the react-router-dom.useParams function in react-router-dom

it('useParams', () => {
      const params: { [key: string]: ?string, ... } = useParams();
    });

function ChapterDetail() {
  const [isModalOpen, toggleModal] = useState(false);
  const { chapterId } = useParams();
  const { formatMessage: f } = useIntl();
  const { loading, error, data } = useQuery(FETCH_CHAPTER, {
    variables: { chapterId: parseInt(chapterId, 0) }
  });

  if (loading) return f({ id: 'loading', defaultMessage: 'Loading...' });
  if (error) return <p id="error_releases">Error :(</p>;

  const langName = languageIdToName(data.chapterById.language);
  const chapterUrl = `${window.location.origin}/${data.chapterById.read_path}`;

  return (
    &lt;&gt;

const EditSource = ({ projectId, sources, setSources, setBreadcrumbs }: CommonSourcePageProps) => {
  const params = useParams<{ sourceId: string }>();

  const sourceData = useMemo(() => sources.find((source: SourceData) => source.sourceId === params.sourceId), [sources, params.sourceId]);

  const connectorSource = useMemo(
    () => allSources.find((source: SourceConnector) => snakeCase(source.id) === sourceData?.sourceProtoType) ?? {} as SourceConnector,
    [sourceData?.sourceProtoType]
  );

  useEffect(() => {
    setBreadcrumbs(withHome({
      elements: [
        { title: 'Sources', link: routes.root },
        {
          title: 
        }
      ]

export const Header: React.FC = props => {
  const classes = useStyles();
  const params = useParams();
  const { data, error } = useStationQuery({ variables: { slug: params.slug } });

  const content = React.useMemo(() => {
    if (data) {
      return (
        <>
          {data.station.name} - Online users: {data.station.onlineUserIds.length}
        
      );
    } else if (error) {
      return error.message;
    }
    return ;
  }, [data, error]);

  return (

function ChannelHeader () {
  const location = useLocation()
  const { channel } = useParams()
  const { networkStore, uiStore } = useContext(RootContext)
  const [t] = useTranslation()

  function handleMenuButtonClick (e) {
    e.stopPropagation()
    uiStore.openControlPanel()
  }

  const overrideName = t(`viewNames.${location.pathname.slice(1)}`)

  return useObserver(() => (
    <div>
      <div></div></div>

export default function Block() {
  const page = usePage();
  const { height } = useParams();
  return (
    <>
      }>
        
      
    
  );
}

function Task() {
  let { task_id } = useParams();
  const [task, setTask] = React.useState({});
  //const [task, setTask] = React.useState(example_task);
  
  React.useEffect(() => {
    var url = new URL("/v1/tasks/" + task_id, window.location.origin);
    get(url).then(
      (task) => {
        setTask(task);
      });
  }, [task_id]);

  const json = (

const UserСardContainer = () => {
  const params = useParams();
  const userId = Number(params.id);

  const onFetchUser = useAction(fetchUserAction.type);
  const user = useSelector(userSelector, userId);
  const fetching = useSelector(isFetchingSelector);

  useEffect(() => {
    onFetchUser({ id: userId });
  }, [onFetchUser, userId]);

  return ;
};

export default function CityStats({ statistics, isLoading, setTitle }) {
  const dispatch = useDispatch();
  const classes = useStyles();

  const account = useSelector(state => state.account);
  const [categoriesToExclude, setCategoriesToExclude] = useState(() =>
    account.preferences && account.preferences.nomadlist
      ? account.preferences.nomadlist
      : []
  );

  let { slug } = useParams();

  const [city, setCity] = useState(null);

  useEffect(() => {
    if (statistics) {
      const c = statistics.cities.find(c => c.place_slug == slug);
      setCity(c);
      setTitle(c.place);
    }
  }, [slug, statistics]);

  const selectedCurrency = useSelector(state =>
    state.account
      ? state.currencies.find(c => c.id === state.account.currency)
      : null
  );