like-gold
like-gold2y ago

hi guys sorry idk why i cant make a

hi guys, sorry idk why i cant make a thread on my phone. i want to ask how to get history state when i try to pass data to next page with push on useNavigate. thabk you
13 Replies
plain-purple
plain-purple2y ago
Hi @Izzati you can use useNavigate from @pankod/refine-react-router-v6 https://reactrouter.com/en/6.5.0/hooks/use-navigate navigate takes state object as a second argument. you can read from other page with useLocation() 's returning state object
import { useNavigate } from "@pankod/refine-react-router-v6";

const navigate = useNavigate();
navigate("/posts", { state: { stateTest: "navigation-state-test" },});
import { useNavigate } from "@pankod/refine-react-router-v6";

const navigate = useNavigate();
navigate("/posts", { state: { stateTest: "navigation-state-test" },});
import { useLocation } from "@pankod/refine-react-router-v6";
const { state } = useLocation();
import { useLocation } from "@pankod/refine-react-router-v6";
const { state } = useLocation();
It should work as expected. if you have problems please reproduce issue on code platforms. we are happy to debug 🙏
provincial-silver
provincial-silver2y ago
useLocation and useNavigate not available on @pankod/refine-react-router-v6 v3.33.2
provincial-silver
provincial-silver2y ago
No description
plain-purple
plain-purple2y ago
i will debug and return you as soon as possible
provincial-silver
provincial-silver2y ago
when i update version react-router-v6 my code look like this
plain-purple
plain-purple2y ago
you can use like this but i strongly recommend update router v6 package
import Router from "@pankod/refine-react-router-v6";
const { useHistory } = Router;

const { push } = useHistory();

push(`/posts/edit/${row.id}`, { state: { foo: "bar" },
})
import Router from "@pankod/refine-react-router-v6";
const { useHistory } = Router;

const { push } = useHistory();

push(`/posts/edit/${row.id}`, { state: { foo: "bar" },
})
import Router from "@pankod/refine-react-router-v6";
const { useLocation } = Router;

const location = useLocation();

console.log(location.state);
import Router from "@pankod/refine-react-router-v6";
const { useLocation } = Router;

const location = useLocation();

console.log(location.state);
provincial-silver
provincial-silver2y ago
only update @pankod/refine-react-router-v6 ?
provincial-silver
provincial-silver2y ago
this is my pankod version
No description
plain-purple
plain-purple2y ago
yes, this will be enough in this case
provincial-silver
provincial-silver2y ago
but i got errors like this ill try use router works!! thank you
provincial-silver
provincial-silver2y ago
@alicanerdurmaz i cant consume location.state.foo bcos foo is uknown type
No description
provincial-silver
provincial-silver2y ago
im use typescript
plain-purple
plain-purple2y ago
i will debug and return you @pankod/refine-react-router-v6 is using react-router-dom@6.3.0 under the hood. in that version, state type is unkown, but they fix in 6.4.0 we need to update react-router-dom in refine . until that, you can use like this: or you can use other workarounds.
const location = useLocation();
const locationState = location.state as any;
console.log(locationState.foo);
const location = useLocation();
const locationState = location.state as any;
console.log(locationState.foo);
do you wanna open issue on github ? if you open, we can speed things up.

Did you find this page helpful?