47ng / 47ng/nuqs

State desynchronization when rendering <Navigate /> on first render

Đang mở
#1,245 3 bình luận 1 reaction 0 người được giao Xem trên GitHub
adapters/react-router bug
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

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.