docs: fix JS/TS code block (#60854)
And also making it more clear it doesn't have to be two separate files.
This commit is contained in:
parent
fcfa45cd8e
commit
1cafe945ab
1 changed files with 13 additions and 16 deletions
|
@ -10,28 +10,25 @@ Reading search parameters through `useSearchParams()` without a Suspense boundar
|
|||
|
||||
Ensure that calls to `useSearchParams()` are wrapped in a Suspense boundary.
|
||||
|
||||
```tsx title="app/page.tsx"
|
||||
import { SearchBar } from './search'
|
||||
import { Suspense } from 'react'
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<SearchBar />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
```jsx title="app/search.tsx"
|
||||
```jsx title="app/search.js"
|
||||
'use client'
|
||||
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import { Suspense } from 'react'
|
||||
|
||||
export function Search() {
|
||||
function Search() {
|
||||
const searchParams = useSearchParams()
|
||||
|
||||
return '...'
|
||||
return <input placeholder="Search..." />
|
||||
}
|
||||
|
||||
export function Searchbar() {
|
||||
return (
|
||||
// You could have a loading skeleton as the `fallback` too
|
||||
<Suspense>
|
||||
<Search />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
|
|
Loading…
Reference in a new issue