CODEWITHSUNDEEP
reactjsreact-router
SM079
SM079

Reputation: 743

Passing and getting params in React routes using navigate()

I am currently stuck in passing paramters to another route using navigate() function.

MainPage.js:

After an API call the value for the below used objects will be obtained

const navigate = useNavigate();

navigate('vapos/filters', {
    FiltersDataList1: FiltersDataList1,  FiltersDataList2: FiltersDataList2,  
    FiltersParamObj1: FiltersParamObj1,  FiltersParamObj2: FiltersParamObj2,  
    FiltersParamLvlObj: FiltersParamLvlObj,  SelectedParams: SelectedParams,  
    handleDropDownChange: handleDropDownChange,  handleSingleSelectChange: handleSingleSelectChange,  
    AppliedFiltersData: AppliedFiltersData,  handleFiltersSubmit: handleFiltersSubmit, 
});

And in my filters page, I am trying to get these values as follows as per the React docs:

FilterPage.js:

export default function FiltersPage({ route }) 
{
console.log('**********************')
console.log(route)

const {FiltersDataList1, FiltersDataList2, AppliedFiltersData, 
  FiltersParamObj1, FiltersParamObj2, FiltersParamLvlObj, 
  SelectedParams, handleDropDownChange, handleSingleSelectChange, handleSubmit} = route.params;

}

The route is coming as undefined. What am I doing wrong?

Edit: Sharing the routes as well

export default function Router() 
{

  const routes = useRoutes([
    {
      path: '/',
      children: [
        { element: <Navigate to="/home" />, index: true },
        { path: 'home', element: <HomePage /> },
        { path: 'vapos/*', element: <MainPage /> },
        { path: 'underConstruction', element: <UnderConstruction /> },
      ],
    },
    {
      path: '/vapos/',
      children: [
        { path: 'vapos/main', element: <MainPage /> },
        { path: 'vapos/filters', element: <FiltersPage /> },
        { path: 'vapos/outliers', element: <Outliers /> },
      ],
    },    
    {
      path: '*',
      element: <HomePage />,
    },
  ]);

  return routes;
}

Upvotes: -1

Views: 55

Answers (3)

Ronak Dholariya
Ronak Dholariya

Reputation: 205

In the latest version react-router-dom@6 use the useLocation() hook to access the state or data present to the child component.

import { useLocation } from "react-router-dom"; 
const location = useLocation();
console.log(location.state.FiltersDataList1) // To access the value

Upvotes: 1

Qian
Qian

Reputation: 597

The path for FiltersPage in your route setup is /vapos/vapos/filters rather than a single /vapos/filters route.

Try

After an API call the value for the below used objects will be obtained

const navigate = useNavigate();

navigate('/vapos/vapos/filters', {
    FiltersDataList1: FiltersDataList1,  FiltersDataList2: FiltersDataList2,  
    FiltersParamObj1: FiltersParamObj1,  FiltersParamObj2: FiltersParamObj2,  
    FiltersParamLvlObj: FiltersParamLvlObj,  SelectedParams: SelectedParams,  
    handleDropDownChange: handleDropDownChange,  handleSingleSelectChange: handleSingleSelectChange,  
    AppliedFiltersData: AppliedFiltersData,  handleFiltersSubmit: handleFiltersSubmit, 
});

Or remove the duplicate vapos in your route definition

Upvotes: 1

Chukwujiobi Canon
Chukwujiobi Canon

Reputation: 4091

You are not using the correct signature of the NavigateFunction [reactrouter.com]:

NavigateFunction(to, options?): void | Promise

options? has the interface NavigateOptions [reactrouter.com] which is as follows:

interface NavigateOptions {
    flushSync?: boolean;
    preventScrollReset?: boolean;
    relative?: RelativeRoutingType;
    replace?: boolean;
    state?: any;
    viewTransition?: boolean;
}

Your use of these interfaces are incorrect and if you were using Typescript, it would throw compile errors.

The object literal:

{
    FiltersDataList1: FiltersDataList1, 
    FiltersDataList2: FiltersDataList2,  
    FiltersParamObj1: FiltersParamObj1, 
    FiltersParamObj2: FiltersParamObj2,  
    FiltersParamLvlObj: FiltersParamLvlObj, 
    SelectedParams: SelectedParams,  
    handleDropDownChange: handleDropDownChange, 
    handleSingleSelectChange: handleSingleSelectChange,  
    AppliedFiltersData: AppliedFiltersData, 
    handleFiltersSubmit: handleFiltersSubmit,
}

Should probably have been passed in options?.state and retrieved via Location.state [reactrouter.com].

navigate(
    'vapos/filters',
    { 
        state: {
            FiltersDataList1: FiltersDataList1, 
            FiltersDataList2: FiltersDataList2,  
            FiltersParamObj1: FiltersParamObj1, 
            FiltersParamObj2: FiltersParamObj2,  
            FiltersParamLvlObj: FiltersParamLvlObj, 
            SelectedParams: SelectedParams,  
            handleDropDownChange: handleDropDownChange, 
            handleSingleSelectChange: handleSingleSelectChange,  
            AppliedFiltersData: AppliedFiltersData, 
            handleFiltersSubmit: handleFiltersSubmit,
        }
    }
);

Upvotes: 1

Related Questions