probable-pink
probable-pink3y ago

params-override

hi. when providing params to a route using react router v6 those get always overridden by the ones provided by refine like pageSize and current. how do i pass the params correctly so they are there additionally to the ones used by refine?
37 Replies
Omer
Omer3y ago
Hey @hannesnussmueller 👋 , How do you pass parameters? Can you share your sample code? 👊
flat-fuchsia
flat-fuchsia3y ago
@Omer i tried lots of things already, especially like this:
const path = generatePath("/productsearch/purchase?id=:id", {
id: product.id.toString(),
});
push(path);
const path = generatePath("/productsearch/purchase?id=:id", {
id: product.id.toString(),
});
push(path);
have also tried to use showUrl instead of push, or use push like this: push("productsearch/purchase") to test and see if i can access the query parameters then on the purchase page with useParams()since pageSize and currentshould be at least present since they are in the url but the response was an empty object
Omer
Omer3y ago
I got it ⚡️Can you create a GitHub issue for this? We can fix it today 🎉
flat-fuchsia
flat-fuchsia3y ago
i don't have gh any longer sounds like i need to reestablish it
quickest-silver
quickest-silver3y ago
@hannesnussmueller seems you only need access to your specific param, or? How does your special route path in App.tsx look like?
flat-fuchsia
flat-fuchsia3y ago
path: "/productsearch/purchase",
quickest-silver
quickest-silver3y ago
You should distinguish between route params => :id and query params => ?id=. Seems like a route param is completely fine in your use case and you don't need a query param. Try it like this: path: "productsearch/purchase/:id", and change to
const path = generatePath("/productsearch/purchase/:id", {
id: product.id.toString(),
});
push(path);
const path = generatePath("/productsearch/purchase/:id", {
id: product.id.toString(),
});
push(path);
flat-fuchsia
flat-fuchsia3y ago
👍 sneaky joe. this works thanks
Omer
Omer3y ago
haha cool @cyborg31 but we'll still fix the query parameters 🤓
quickest-silver
quickest-silver3y ago
I hope so ^^
Omer
Omer3y ago
I created a PR but I think we can handle it better 💯 https://github.com/pankod/refine/pull/2298/files Hey @hannesnussmueller 👋 , We've fixed this issue with @pankod/refine-core@3.56.11
fair-rose
fair-rose3y ago
Hey guys! I´m kind of confused. I was trying to pass state through useNavigation -> push and UseLocation() -> state. At first I couldn´t do it. I was trying this way: import { useNavigation } from "@pankod/refine-core"; const { push } = useNavigation(); const handleOk = () => { close(); push("create", { resourceIds: [1,2,3]} ); };
Omer
Omer3y ago
Hey @albcunha 👋, We probably don't keep state. Can you create an issue? https://github.com/pankod/refine/blob/next/packages/core/src/hooks/useTable/index.ts#L225
GitHub
refine/index.ts at next · pankod/refine
A React-based framework for building internal tools, rapidly. - refine/index.ts at next · pankod/refine
fair-rose
fair-rose3y ago
Then it worked this way:
Omer
Omer3y ago
or you can use query parameter instead of state
fair-rose
fair-rose3y ago
import { useNavigation } from "@pankod/refine-core"; const { push } = useNavigation(); const handleOk = () => { close(); push("create", { state: { rifKeys: selectedModalRowKeys, }, }); }; Oh, I see
Omer
Omer3y ago
but if it works that way, great! I didn't think it would work
fair-rose
fair-rose3y ago
It worked! Your code is so good that it works even when you think it wont! 😄
Omer
Omer3y ago
GitHub
refine/index.ts at next · pankod/refine
A React-based framework for building internal tools, rapidly. - refine/index.ts at next · pankod/refine
fair-rose
fair-rose3y ago
I was thinking if it was a good idea to do a BUG report asking to fix the state key (like it is suggested on react-router-v6 and v5, or a change docs exlaining how to do it
Omer
Omer3y ago
It would be great if it was mentioned in the documentation
fair-rose
fair-rose3y ago
I´ll do it
Omer
Omer3y ago
Thank you! 🚀
fair-rose
fair-rose3y ago
In my case I have some ids from another resource that i want to pass to create route, so it would more "clean" to have them as state
Omer
Omer3y ago
React Router
React Router v6 is here. React Router v6 takes the best features from previous versions—and its sister project, Reach Router—in our smallest and most powerful package yet.
fair-rose
fair-rose3y ago
They didn´t give as much attentionas in v5
Omer
Omer3y ago
ahh ok i understand now
fair-rose
fair-rose3y ago
fair-rose
fair-rose3y ago
Thanks! best regards I´ll be doing a presentation on a refine app next week, is there a place where I can send photos of some pages? i was able to hook it up with apache-echarts and kepler.gl
Omer
Omer3y ago
GitHub
refine Users ❤️ 🚀 · Issue #1143 · pankod/refine
We appreciate your support if you or your organization is using refine. You are welcome to leave replies about your product and organization here, which could become the confidence of maintainers, ...
Omer
Omer3y ago
how about posting it here? Or #showcase channel 🙂
fair-rose
fair-rose3y ago
No description
fair-rose
fair-rose3y ago
Ok. After it is gone I´ll work it out
Omer
Omer3y ago
Wow Great job! ⚡️ How was your experience with refine? Was everything okay?
fair-rose
fair-rose3y ago
No description
fair-rose
fair-rose3y ago
Refine was the best part for sure!! One thing I did a lot was to search this discord channel with doubts I had, and your support was excelent!
Omer
Omer3y ago
Great to hear that! Thank you very much for your support and interest 🍻

Did you find this page helpful?