feat: Added react-router v7 support

[teukuamru]

Added support for react-router v7.

Closes #782.

[vercel]

@teukuamru is attempting to deploy a commit to the 47ng Team on Vercel.

A member of the Team first needs to authorize it.

[franky47]

LGTM, thanks!

Maybe we could add a comment in the adapters/react-router adapter mentioning it's for v6.

Also an update of the docs would be welcome, to point folks to the right adapter (using Callouts in the Remix section).

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nuqs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 10, 2024 9:22am

[rickyzhangca]

can't wait!

[fobos531]

@franky47 Is there anything blocking this?

@teukuamru I see that the lint action failed - seems pretty easy to fix, the peerDependencies just need to be sorted

[franky47]

I need to find some free time to try out RRv7, I had an unpushed branch with Remix improvements that could also be factored in this.

[teukuamru]

I need to find some free time to try out RRv7, I had an unpushed branch with Remix improvements that could also be factored in this.

so, should I fix the lint or just wait for you to try out RRv7?

[franky47]

I'll do it, I'm also going to add e2e tests for Remix, RRv6 & RRv7.

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/nuqs@785

commit: d000ca8

[franky47]

Merged but I want to add some more tests in a separate PR before shipping it to GA.

In the mean time, y'all can use the preview deployment (feedback welcome!):

pnpm add https://pkg.pr.new/nuqs@785

And import the adapter as such:

// app/root.tsx
import { NuqsAdapter } from 'nuqs/adapters/react-router/v7'

// ...

export default function App() {
  return (
    <NuqsAdapter>
      <Outlet />
    </NuqsAdapter>
  )
}

[faradaytrs]

Merged but I want to add some more tests in a separate PR before shipping it to GA.

In the mean time, y'all can use the preview deployment (feedback welcome!):

pnpm add https://pkg.pr.new/nuqs@785

And import the adapter as such:

// app/root.tsx
import { NuqsAdapter } from 'nuqs/adapters/react-router/v7'

// ...

export default function App() {
  return (
    <NuqsAdapter>
      <Outlet />
    </NuqsAdapter>
  )
}

404 not found

[franky47]

@faradaytrs Try that URL: https://pkg.pr.new/nuqs@d000ca8db65a027e11960c4b99736017c2a5ddaa

I'll check with the pkg.pr.new folks what went wrong with the PR-numbered release, thanks for the heads-up.

[faradaytrs]

@faradaytrs Try that URL: https://pkg.pr.new/nuqs@d000ca8db65a027e11960c4b99736017c2a5ddaa

I'll check with the pkg.pr.new folks what went wrong with the PR-numbered release, thanks for the heads-up.

i upgraded and it works fine, no problems detected

[github-actions]

🎉 This PR is included in version 2.3.0-beta.1 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[ZipBrandon]

I'm using 2.3.0-beta.2 on a new RR7 app. I incorporated the adapter with import { NuqsAdapter } from 'nuqs/adapters/react-router/v7', but when I use useQueryState() I get Error: useNavigate() may be used only in the context of a <Router> component.. I have the Adapter surrounding the outlet in the App.

export default function App() {
	return (
		<NuqsAdapter>
			<Outlet />
		</NuqsAdapter>
	);
}```

[franky47]

@ZipBrandon thanks for the feedback and testing the beta!

Could you open a dedicated issue with a repro link so I can take a look please?