在react-router-dom v6非JSX环境中如何实现编程式路由重定向？

方案1：直接使用window.location.href（适配你的Tauri场景） #

既然你确认在Tauri事件环境下该方式可行，直接替换注释代码即可：

async function onLinked(event: Event<string>) {
    const { payload } = event;
    if (payload == "test:")
        window.location.href = "/testPage";
}

这种方式实现简单，虽然会触发页面刷新，但完全满足你的需求场景。

方案2：无刷新的React路由跳转（推荐，保持单页应用体验） #

如果想避免整页刷新，需要提前获取React Router的导航实例，步骤如下：

1. 在路由配置文件中创建并导出路由实例：

// router.tsx
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import TestPage from "./pages/TestPage";
import Home from "./pages/Home";

// 创建路由实例并导出
export const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/testPage", element: <TestPage /> },
]);

// 根组件中渲染路由
function App() {
  return <RouterProvider router={router} />;
}

2. 在事件处理文件中导入路由实例，调用navigate方法跳转：

import { router } from "./router";

async function onLinked(event: Event<string>) {
    const { payload } = event;
    if (payload == "test:")
        router.navigate("/testPage");
}

该方式和组件内使用useNavigate效果一致，不会触发整页刷新，能保持单页应用的流畅性。

补充：之前Navigate组件方案失效的原因 #

Navigate组件必须在React Router的上下文（即RouterProvider或BrowserRouter包裹的范围内）才能生效，你直接用ReactDOM.render挂载它，脱离了路由上下文，因此无法触发跳转。

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