exotic-emerald•2y 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•2y ago

Hey @hannesnussmueller 👋 , How do you pass parameters? Can you share your sample code? 👊

flat-fuchsia•2y 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•2y ago

I got it ⚡️Can you create a GitHub issue for this? We can fix it today 🎉

flat-fuchsia•2y ago

i don't have gh any longer sounds like i need to reestablish it

xenial-black•2y 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•2y ago

path: "/productsearch/purchase",

xenial-black•2y 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•2y ago

👍 sneaky joe. this works thanks

Omer•2y ago

haha cool @cyborg31 but we'll still fix the query parameters 🤓

xenial-black•2y ago

I hope so ^^

Omer•2y 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 ⚡

broad-brown•2y 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•2y 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

broad-brown•2y ago

Then it worked this way:

Omer•2y ago

or you can use query parameter instead of state

broad-brown•2y ago

import { useNavigation } from "@pankod/refine-core"; const { push } = useNavigation(); const handleOk = () => { close(); push("create", { state: { rifKeys: selectedModalRowKeys, }, }); }; Oh, I see

Omer•2y ago

but if it works that way, great! I didn't think it would work

broad-brown•2y ago

It worked! Your code is so good that it works even when you think it wont! 😄

Omer•2y ago

https://github.com/pankod/refine/blob/next/packages/core/src/hooks/navigation/index.ts#L84

GitHub

refine/index.ts at next · pankod/refine

A React-based framework for building internal tools, rapidly. - refine/index.ts at next · pankod/refine

broad-brown•2y 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•2y ago

It would be great if it was mentioned in the documentation

broad-brown•2y ago

I´ll do it

Omer•2y ago

Thank you! 🚀

broad-brown•2y 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•2y ago

https://reactrouter.com/docs/en/v6/hooks/use-navigate

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.

broad-brown•2y ago

They didn´t give as much attentionas in v5

Omer•2y ago

ahh ok i understand now

broad-brown•2y ago

https://v5.reactrouter.com/web/api/location

ReactRouterWebsite

React Router: Declarative Routing for React

Learn once, Route Anywhere

broad-brown•2y 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•2y ago

https://github.com/pankod/refine/issues/1143

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•2y ago

how about posting it here? Or #showcase channel 🙂

broad-brown•2y ago

broad-brown•2y ago

Ok. After it is gone I´ll work it out

Omer•2y ago

Wow Great job! ⚡️ How was your experience with refine? Was everything okay?

broad-brown•2y 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•2y ago

Great to hear that! Thank you very much for your support and interest 🍻