T
TanStack•10mo ago
fair-rose

How to programmatically navigate to a new tab with useNavigate?

Hi! I'm trying to figure out the best way to programmatically navigate to a route in a new tab using TanStack Router. Currently I'm using useNavigate like this: 
const navigate = useNavigate({ from: ApplicationsRoute.fullPath })

// In a click handler:
navigate({
  to: '/applications/$a/$b/$c/data',
  params: { a, b, c },
  state: { prev: { search } }
})
const navigate = useNavigate({ from: ApplicationsRoute.fullPath })

// In a click handler:
navigate({
  to: '/applications/$a/$b/$c/data',
  params: { a, b, c },
  state: { prev: { search } }
})
I know I can use the Link component with target="_blank" for regular links, but in this case I need to do this programmatically from a click handler. Is there a built-in way to achieve this without having to use window.open() or creating a hidden Link component?
3 Replies
genetic-orange
genetic-orange•10mo ago
this is not supported. but you can do this 
const url = router.buildLocation({{
  to: '/applications/$a/$b/$c/data',
  params: { a, b, c }
})
window.open(url)
const url = router.buildLocation({{
  to: '/applications/$a/$b/$c/data',
  params: { a, b, c }
})
window.open(url)
fair-rose
fair-roseOP•10mo ago
that's exactly what i did and it works pretty well, i wish that navigate would have a target parameter
genetic-orange
genetic-orange•10mo ago
maybe we could add this. but since there is a simple solution available I am not sure if this is necessary.

Did you find this page helpful?