CODEWITHSUNDEEP
reactjsreact-routerreact-router-domag-grid
Usama
Usama

Reputation: 1225

Route/Redirect to another page in new tab using useNavigate

I am using ag-grid and it has an event onSelectionChanged, which make the row clickable. When I click on row below function is called.

const onSelectionChanged = useCallback(() => {

  const selectedRow = gridRef.current.api.getSelectedRows(); //get the row data

  let navigate = useNavigate();   //import { useNavigate } from "react-router-dom";
  navigate('/Detail', { state: { data: selectedRow[0]} });  //navigate to detail page

}, []);

The function navigates to the detail page and the state is passed. But navigate() calls the Detail page in same tab.

I want to open the page in new tab. Is this possible using this method? or there is another way to accomplish my goal?

Upvotes: 2

Views: 5242

Answers (1)

ad2969
ad2969

Reputation: 500

react-router isn't supposed to help preserve state when opening things in a new tab. In fact, fundamentally, react isn't supposed to help do this.

I'd approach this in two ways:

  • If the data is simple enough, pass it as a query or path param using windows.open(window.open("http://link?key="+ value +"&key2="+ value2 ..."); )
  • Look into other state management methods like localstorage or something else

Upvotes: 3

Related Questions