mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
241ac2d62b
## For Contributors ### Adding a feature Adding a new ESLint rule to `eslint-plugin-next` reporting `location.href = [relative URL]` or `location.assign([relative URL])` usage. For some reason, some LLM models prefer this incorrect pattern, and avoid `redirect()` or `useRouter().push()` at all costs. But at least many of them do respect ESLint, by adding a new rule we can enforce correct behavior. The error documentation and unit test cases are also added. --------- Co-authored-by: Joseph <[email protected]> Co-authored-by: Benjamin Woodruff <[email protected]>
76 lines
2.0 KiB
Plaintext
76 lines
2.0 KiB
Plaintext
---
|
|
title: No location.assign or location.href navigation to relative URLs
|
|
---
|
|
|
|
> Prevent usage of `location.assign()` or `location.href` assignment to navigate to internal Next.js pages.
|
|
|
|
## Why This Error Occurred
|
|
|
|
`location.assign()` or `location.href = ...` was used to navigate to a relative URL. In Next.js, this bypasses the client-side router, causing a full page reload and losing any prefetched data or state managed by the framework.
|
|
|
|
## Possible Ways to Fix It
|
|
|
|
### During the render phase
|
|
|
|
Use [`redirect()`](/docs/app/api-reference/functions/redirect) from `next/navigation`:
|
|
|
|
```tsx filename="app/page.tsx"
|
|
import { redirect } from 'next/navigation'
|
|
|
|
export default function Page() {
|
|
redirect('/dashboard')
|
|
}
|
|
```
|
|
|
|
```tsx filename="app/components/my-component.tsx"
|
|
'use client'
|
|
|
|
import { redirect } from 'next/navigation'
|
|
|
|
export default function MyComponent({
|
|
isAuthorized,
|
|
}: {
|
|
isAuthorized: boolean
|
|
}) {
|
|
if (!isAuthorized) {
|
|
redirect('/login')
|
|
}
|
|
return <div>Protected content</div>
|
|
}
|
|
```
|
|
|
|
### In Client Components (event handlers)
|
|
|
|
Use [`useRouter().push()`](/docs/app/api-reference/functions/use-router) from `next/navigation`:
|
|
|
|
```tsx filename="app/components/my-button.tsx"
|
|
'use client'
|
|
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
export default function MyButton() {
|
|
const router = useRouter()
|
|
|
|
return (
|
|
<button onClick={() => router.push('/dashboard')}>Go to Dashboard</button>
|
|
)
|
|
}
|
|
```
|
|
|
|
### External URLs
|
|
|
|
If you are navigating to an external URL (one with a protocol, e.g. `https://`), `location.assign()` and `location.href` are acceptable and will not trigger this rule:
|
|
|
|
```js
|
|
// Allowed — navigating to an external site
|
|
location.href = 'https://example.com'
|
|
window.location.assign('https://example.org/path')
|
|
```
|
|
|
|
## Useful Links
|
|
|
|
- [Redirecting in Next.js](/docs/app/guides/redirecting)
|
|
- [Linking and Navigating in Next.js](/docs/app/getting-started/linking-and-navigating)
|
|
- [`redirect` API Reference](/docs/app/api-reference/functions/redirect)
|
|
- [`useRouter` API Reference](/docs/app/api-reference/functions/use-router)
|