State desynchronization when rendering <Navigate /> on first render
- Ngôn ngữ chính
- TypeScript
- Star
- 10.8k
- Fork
- 294
- Merge trung bình
- 1 ngày 16 giờ
- Pull request đã merge (30 ngày)
- 21
Mô tả
## Context
What's your version of `nuqs`?
```
"nuqs": "2.8.2",
```
What framework are you using?
- ❌ Next.js (app router)
- ❌ Next.js (pages router)
- ✅ React SPA (no router)
- ❌ Remix
- ✅ React Router
Which version of your framework are you using?
```
"react-router": "^6.30.2",
"react-router-dom": "^6.30.2",
```
## Description
When rendering a `` component which updates the search params on first render, `nuqs` state will never synchronize its state back.
## Reproduction
```typescript
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { parseAsString, useQueryStates } from 'nuqs';
import { NuqsAdapter } from 'nuqs/adapters/react-router/v6';
import { BrowserRouter, Link, Navigate } from 'react-router-dom';
import { describe, expect, test } from 'vitest';
function TestComponent() {
const [nuqsState] = useQueryStates({
search: parseAsString.withDefault(''),
});
if (nuqsState.search === 'REDIRECT') {
return (
);
}
return (
<>
{nuqsState.search}
Trigger redirect
);
}
describe('nuqs repro', () => {
test('with initial search param', async () => {
using _ = withInitialUrl('/?search=foo');
const { container } = render(
,
);
expect(container).toHaveTextContent('foo');
});
test('with a click on a link which triggers the rendering of ', async () => {
using _ = withInitialUrl('/?search=foo');
const user = userEvent.setup();
const { container, getByRole } = render(
,
);
const redirectButton = getByRole('link', { name: 'Trigger redirect' });
await user.click(redirectButton);
expect(container).toHaveTextContent('foo');
});
test('with initial search param', async () => {
/**
* With this URL, will render on first render.
*/
using _ = withInitialUrl('/?search=REDIRECT');
const { container } = render(
,
);
await expect.poll(() => container).toHaveTextContent('foo');
});
});
function withInitialUrl(url: string) {
window.history.pushState({}, '', url);
return {
[Symbol.dispose]: () => {
window.history.pushState({}, '', '/');
},
};
}
```
Hướng dẫn đóng góp
Đánh giá
Issue này chưa được đánh giá.