stormy-gold•2y ago

Make useSearchParams() hook available in pankodrefine-react-router-v6

Is it possible to make React Router's useSearchParams hook available through refine-react-router-v6? https://reactrouter.com/en/main/hooks/use-search-params I know one could format and parse searchparams with the help of a third party package but the built in hook seems more convenient. 🥺 Correct me if its already possible. Thank you

useSearchParams v6.4.4

18 Replies

Omer•2y ago

Hey @zomh 👋 , I think we should export everything from our react router package. Thus, we will meet your request. Can you create a feature request? 👀 We've released @pankod/refine-react-router-v6@3.38.0. You can update your refine dependencies with npm run refine update or npx @pankod/refine-cli update commands. @zomh

stormy-gold•2y ago

hey @Omer thats great news! 🔥 I just read this do you still need the feature request?

Omer•2y ago

It would be great if you can create ⚡

stormy-gold•2y ago

feature request is done. this thread can be marked as resolved. thanks again

Omer•2y ago

Thank you! ⚡

fascinating-indigo•2y ago

Hello, is this working ? cause im using useRouterContext and is no useSearchParams hook for usage.

Omer•2y ago

Hey @benjaoliva , With refine v4, routing has been completely handed over to the user's control. You can manage it just like you would in a vanilla React app 🎯 https://refine.dev/docs/packages/documentation/routers/react-router-v6/

React Router v6 | refine

refine provides router bindings and utilities for React Router v6. It is built on top of the react-router-dom package. This package will provide easy integration between refine and react-router-dom for both existing projects and new projects.

fascinating-indigo•2y ago

Hi @Omer, im trying to use the useSearchParams hook with the refine routerProvider on a show.tsx file, but I cant figure out how to do it 😦

Omer•2y ago

What kind of issue are you experiencing? Could you provide some more details?

fascinating-indigo•2y ago

Sure, I got this config on main Refine component:

<Refine
...
resources={
[...,
{
            name: "events",
            list: EventList,
            show: EventShow,
            edit: EventEdit,
            meta: {
              dataProviderName: "events",
            },
          },]
}
/>

<Refine
...
resources={
[...,
{
            name: "events",
            list: EventList,
            show: EventShow,
            edit: EventEdit,
            meta: {
              dataProviderName: "events",
            },
          },]
}
/>

On my component EventShow I have a Button component lets say that onClick I want to set some url search params. On react router v6, useSearchParam hook has a setter for this, but importing and using it will throw me an error: Error: useLocation() may be used only in the context of a <Router> component. So I made some research and found the useRouterContex that gives some hooks from react router, but there is not the useSearchParams one. How i'm supposed to do this right ? Im I missing something ?

Omer•2y ago

Could you create a CodeSandbox for us to replicate the issue? You can fork from this example of ours: https://refine.dev/docs/examples/tutorial/headless-tutorial/

Headless | refine

It is the example created at the end of the tutorial with headless selection.

fascinating-indigo•2y ago

Sure, here its the sandbox https://codesandbox.io/s/tutorial-test-dx0z6t?file=/src/pages/products/show.tsx Im on v3 btw

BenjaOliva

CodeSandbox

Tutorial test - CodeSandbox

Tutorial test by BenjaOliva using @refinedev/cli, @refinedev/core, @refinedev/inferencer, @refinedev/react-hook-form, @refinedev/react-router-v6, @refinedev/react-table, @refinedev/simple-rest, @tanstack/react-table, @testing-library/jest-dom

Omer•2y ago

Why are you trying to use useRouterContext? You can directly use the react-router-dom package

fascinating-indigo•2y ago

Cause when i use the direct react-router-dom it gives me the Error: useLocation() may be used only in the context of a <Router> component. Im on v3, I dont have the <BrowserRouter> component over Refine component

Omer•2y ago

By upgrading your project to v4, you can achieve a much more flexible routing structure.

fascinating-indigo•2y ago

Oh I see, well im on next js so it will take me a while to adjust to new config 😕 Thanks for the assistance Omer!!

Omer•2y ago

Are you using Next.js? 👀

fascinating-indigo•2y ago

Yes I am I tried the command for migration, it works great but the routing and foldering has to be manual and it will take me a while