adverse-sapphire•2y 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

extended-salmon•2y 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 🙏

xenial-black•2y ago

useLocation and useNavigate not available on @pankod/refine-react-router-v6 v3.33.2

xenial-black•2y ago

extended-salmon•2y ago

i will debug and return you as soon as possible

xenial-black•2y ago

when i update version react-router-v6 my code look like this

extended-salmon•2y 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);

xenial-black•2y ago

only update @pankod/refine-react-router-v6 ?

xenial-black•2y ago

this is my pankod version

extended-salmon•2y ago

yes, this will be enough in this case

xenial-black•2y ago

but i got errors like this ill try use router works!! thank you

xenial-black•2y ago

@alicanerdurmaz i cant consume location.state.foo bcos foo is uknown type

xenial-black•2y ago

im use typescript

extended-salmon•2y 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.