reactjs - 如何在 Tauri 中使用 window.location？

Question

我在 svg 中有一个 onclick 链接，可以链接到网站/程序的另一部分。我在 onclick 中使用了 window.location.replace(...)

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

这对于 Web 浏览器来说工作正常 - 但它会导致 Tauri 应用程序只是白屏。

我做了一些搜索，发现了一些说使用 window.eval(window.location.replace(...)) 的东西但不幸的是，这也没有用。

我希望使用 <Link>作为替代品，从我读过的内容来看，它似乎更好，但我无法让它在 onClick 中工作。

有没有办法在 tauri 中使用 window.location 函数？如果没有，我可以使用 <Link> 吗？在 onClick 中？

谢谢!

Answer 1

如果您正在使用 react-router 并使用元素的 onClick 属性，那么您需要使用 history 对象或 navigate 函数发出命令式重定向。 Link 组件需要渲染到 DOM 中才能被点击，它不能在 onClick 回调中使用另一个元素。

react-router@5

导入并使用 useHistory钩子(Hook):

import { useHistory } from 'react-router';

const Component = () => {
  ...

  const history = useHistory();

  ...

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

react-router@6

导入并使用 useNavigate钩子(Hook):

import { useNavigate } from 'react-router';

const Component = () => {
  ...

  const navigate = useNavigate();

  ...

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