Tauri中使用window.location.replace跳转白屏的解决方案

首先明确：Tauri原生支持window.location系列方法，你遇到的白屏问题不是API不兼容，是使用方式不符合Tauri的运行逻辑。

白屏原因 #

• 直接调用window.location.replace()属于硬跳转，会触发整个Webview的页面重载，如果你使用React/Vue等框架的前端路由（尤其是History模式），重载时Webview会去目标路径查找物理静态文件，找不到对应资源就会直接白屏。
• 你尝试的window.eval(window.location.replace(...))写法和直接调用API逻辑完全一致，没有解决资源加载路径的问题，自然不会生效。
• <Link>是声明式路由组件，只能写在JSX/TSX的渲染层，无法在onClick事件回调里直接调用，这是框架路由的基础规则，和Tauri无关。

正确实现方式 #

应用内页面跳转（推荐方案） #

应用内页面优先走前端路由的编程式导航，不需要硬套<Link>组件，也不要用window.location做硬跳转：

• React技术栈示例（React Router v6）：

import { useNavigate } from 'react-router-dom'

function Demo() {
  const navigate = useNavigate()
  const handleSvgClick = () => {
    // 对应原window.location.replace的替换历史栈逻辑
    navigate('/target-page', { replace: true })
  }

  return (
    <svg onClick={handleSvgClick}>
      {/* 你的SVG图形内容 */}
    </svg>
  )
}

• Vue技术栈示例（Vue Router v4）：

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const handleSvgClick = () => {
  router.replace('/target-page')
}
</script>
<template>
  <svg @click="handleSvgClick">
    <!-- 你的SVG图形内容 -->
  </svg>
</template>

如果你想保留<Link>组件的实现，直接把SVG元素包裹在<Link>组件内即可，不需要额外绑定onClick事件：

import { Link } from 'react-router-dom'

<Link to="/target-page" replace>
  <svg>
    {/* 你的SVG图形内容 */}
  </svg>
</Link>

必须使用window.location的场景 #

如果你确实需要做硬跳转，先检查两处配置：

1. 打开tauri.conf.json，找到tauri.security.csp配置，确认navigate-src规则包含'self'，允许同源路径导航
2. 如果使用History模式路由，确认前端构建时的资源公共路径设为相对路径./，同时路由base配置和应用加载路径一致，避免重载时找不到静态资源；如果不想改配置，换成Hash路由模式，调用window.location.replace('/#/target-page')也可以避免白屏。

内容的提问来源于stack exchange，提问作者Vcoss