reactjsreact-routerreact-router-dom

how do i pass props to next screen using Navigate

<Navigate to={"/plans"} />; I am using this to navigate to plans page but i want to send some data with it any idea how can I do it? new to programming

Solution

  • Pass data in route state on the Navigate component's state prop.

    Navigate (v6, current (v7)):

    declare function Navigate(props: NavigateProps): null;

interface NavigateProps {
  to: To;
  replace?: boolean;
  state?: State;
}

    Usage:

    <Navigate to={"/plans"} state={{ data }} />

    And to access the route state on the target routed component use the useLocation (v6, current (v7)) hook access it.

    const { state } = useLocation();

...

const { data } = state;