How to use window.location with Tauri?

Question

I've got an onclick link in an svg that would link to another part of the website/program. I used window.location.replace(...) in the onclick

<example onClick(() => window.location.replace(...)) />

and that works fine for the web browser - but it causes the Tauri application to just white screen.

I did a little searching and found something that said to use window.eval(window.location.replace(...)) but that didn't work either unfortunately.

I was hoping to use a <Link> as a replacement as that seems better from what I've read, but I couldn't get it working in the onClick.

Is there a way to use window.location functions in tauri? And if not is there a way I could use a <Link> in an onClick?

Thanks!

Answer 1

If you are using react-router and using an element's onClick prop then you'll want to use the history object or navigate function to issue an imperative redirect. The Link component needs to be rendered into the DOM in order for it to be clicked, it can't be used in the onClick callback of another element.

react-router@5

Import and use the useHistory hook:

import { useHistory } from 'react-router';

const Component = () => {
  ...

  const history = useHistory();

  ...

  <example onClick={() => history.replace(".....")} />

react-router@6

Import and use the useNavigate hook:

import { useNavigate } from 'react-router';

const Component = () => {
  ...

  const navigate = useNavigate();

  ...

  <example onClick={() => navigate(".....", { replace: true })} />