ambitious-aqua
ambitious-aquaโ€ข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
18 Replies
Omer
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
ambitious-aqua
ambitious-aquaโ€ข2y ago
hey @Omer thats great news! ๐Ÿ”ฅ I just read this do you still need the feature request?
Omer
Omerโ€ข2y ago
It would be great if you can create โšก
ambitious-aqua
ambitious-aquaโ€ข2y ago
feature request is done. this thread can be marked as resolved. thanks again
Omer
Omerโ€ข2y ago
Thank you! โšก
eager-peach
eager-peachโ€ข17mo ago
Hello, is this working ? cause im using useRouterContext and is no useSearchParams hook for usage.
Omer
Omerโ€ข17mo 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.
eager-peach
eager-peachโ€ข17mo 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
Omerโ€ข17mo ago
What kind of issue are you experiencing? Could you provide some more details?
eager-peach
eager-peachโ€ข17mo 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
Omerโ€ข17mo 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.
eager-peach
eager-peachโ€ข17mo ago
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
Omerโ€ข17mo ago
Why are you trying to use useRouterContext? You can directly use the react-router-dom package
eager-peach
eager-peachโ€ข17mo 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
Omerโ€ข17mo ago
By upgrading your project to v4, you can achieve a much more flexible routing structure.
eager-peach
eager-peachโ€ข17mo 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
Omerโ€ข17mo ago
Are you using Next.js? ๐Ÿ‘€
eager-peach
eager-peachโ€ข17mo 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