javascript - React-Native: useSearchParams hook from 'expo-router' - Stack Overflow

admin管理员组

文章数量:1391951

I am a beginner learning react native. I want to use the useSearchParams hook from 'expo-router', but I get the error message: error: TypeError: 0, _expoRouter.useSearchParams is not a function (it is undefined)

So maybe the useSearchParams hook doesn't exist anymore (I am following this from a tutorial).

This is my code:

import { Stack, useRouter, useSearchParams } from 'expo-router'

const JobDetails = () => {
  // get specific ID of job details page we are on
  const params = useSearchParams();
  const router = useRouter();

  const { data, isLoading, error, refetch } = useFetch("job-details", {
    job_id: params.id,
  })

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.lightWhite}}>
      <Stack.Screen></Stack.Screen>
    </SafeAreaView>
  )
}

export default JobDetails

Am I correct in thinking that useSearchParams doesn't exist anymore? If so, I have e across useLocalSearchParams and useGlobalSearchParams. What are the use cases for both? Which would therefore be better to use in my example above?

I am a beginner learning react native. I want to use the useSearchParams hook from 'expo-router', but I get the error message: error: TypeError: 0, _expoRouter.useSearchParams is not a function (it is undefined)

So maybe the useSearchParams hook doesn't exist anymore (I am following this from a tutorial).

This is my code:

import { Stack, useRouter, useSearchParams } from 'expo-router'

const JobDetails = () => {
  // get specific ID of job details page we are on
  const params = useSearchParams();
  const router = useRouter();

  const { data, isLoading, error, refetch } = useFetch("job-details", {
    job_id: params.id,
  })

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.lightWhite}}>
      <Stack.Screen></Stack.Screen>
    </SafeAreaView>
  )
}

export default JobDetails

Am I correct in thinking that useSearchParams doesn't exist anymore? If so, I have e across useLocalSearchParams and useGlobalSearchParams. What are the use cases for both? Which would therefore be better to use in my example above?

• javascript
• reactjs
• react-native
• expo-router

Share Improve this question Follow edited Mar 30, 2024 at 0:00 Drew Reese 204k1818 gold badges245245 silver badges273273 bronze badges asked Mar 29, 2024 at 23:31 user985216user985216 5111 silver badge44 bronze badges 1

• 1 I don't see any useSearchParams hook in the docs, but I do see useGlobalSearchParams and a useLocalSearchParams hooks exported. If you want to learn about their differences see Use search parameters. – Drew Reese Commented Mar 30, 2024 at 0:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

useLocalSearchParams Returns the search parameters for the current ponent. It only updates when the global URL conforms to the route. useGlobalSearchParams Returns the global URL regardless of the ponent. It updates on every search param change and might cause ponents to update extraneously in the background.

the only difference is how frequently they update and i remend useLocalSearchParams

read more here: https://docs.expo.dev/router/reference/search-parameters/

import { Stack, useRouter, useLocalSearchParams, useGlobalSearchParams } from 'expo-router'

Using useLocalSearchParams or useGlobalSearchParams instead or useSearchParams will fix the error.

Results:

useGlobalSearchParams made the background screens re-render when the search params changed. It can cause performance issues if overused.

Global re-renders are executed in order of the stack, so the first screen is re-rendered first, then the user=charlie screen is re-rendered after.

useLocalSearchParams remained the same, even when the global search params changed. You can leverage this behavior for data fetching to ensure the previous screen's data is still available when you navigate back.

I think you're following the same tutorial as me. :)

It looks like useSearchParams() has been deprecated, and can be replaced by either useLocalSearchParams() or useGlobalSearchParams()

本文标签： javascriptReactNative useSearchParams hook from 39exporouter39Stack Overflow