如何使用Qwik-Speak实现Qwik URL路由的动态翻译？

可以实现切换语言时动态翻译路由路径并保留原有功能，以下是具体实现方案：

核心思路 #

通过路由翻译映射、动态路由匹配和多语言路由生成三个环节，将不同语言的路径指向同一组件，同时保证组件的loader、action等原有功能不受影响。

1. 定义路由翻译映射 #

在Qwik-Speak的翻译资源文件中，为每个路由添加多语言映射：

• en.json（英文）：

{
  "routes": {
    "about": "/about-us"
  }
}

• sv.json（瑞典语）：

{
  "routes": {
    "about": "/om-oss"
  }
}

或者单独维护一个路由映射文件（如route-translations.ts），统一管理各语言的路由对应关系：

export const routeMap = {
  "en-US": { about: "/about-us" },
  "sv-SE": { about: "/om-oss" }
};

2. 生成多语言路由链接 #

在组件中，不要直接写固定路径，而是通过Qwik-Speak的翻译函数生成对应语言的路由：

import { component$ } from '@builder.io/qwik';
import { useSpeak, useLocale } from 'qwik-speak';

export default component$(() => {
  const { t } = useSpeak();
  const locale = useLocale();

  return (
    <a href={`/${locale}/${t('routes.about')}`}>
      {t('about.pageTitle')}
    </a>
  );
});

3. 配置路由匹配规则 #

由于Qwik基于文件系统路由，需要将不同语言的路径映射到同一组件：

• 创建动态路由文件src/routes/[lang]/[...slug]/index.tsx
• 在loader中根据当前语言和路径slug匹配对应组件：

import { component$, useRouteLoader$ } from '@builder.io/qwik';
import { useLocale } from 'qwik-speak';
import AboutUs from '../about-us/index';

export const useLoader = useRouteLoader$(({ params }) => {
  const locale = useLocale();
  const slug = params.slug;

  // 匹配瑞典语路径到AboutUs组件
  if (locale === 'sv-SE' && slug === 'om-oss') {
    return { Component: AboutUs };
  }
  // 匹配英语路径到AboutUs组件
  if (locale === 'en-US' && slug === 'about-us') {
    return { Component: AboutUs };
  }
  // 其他情况返回404或默认组件
  return { Component: () => <div>404</div> };
});

export default component$(() => {
  const { Component } = useLoader();
  return <Component />;
});

4. 语言切换时的路由跳转 #

在语言切换逻辑中，解析当前路径并生成对应语言的新路径跳转：

import { $, useNavigate } from '@builder.io/qwik';
import { useSpeak, useLocale } from 'qwik-speak';
import { routeMap } from './route-translations';

// 反向映射：路径到路由键的对应关系
const reverseRouteMap = {
  "/about-us": "about",
  "/om-oss": "about"
};

export const switchLocale = $((newLocale: string) => {
  const navigate = useNavigate();
  const currentLocale = useLocale();
  const currentPath = window.location.pathname.replace(`/${currentLocale}`, '');
  const routeKey = reverseRouteMap[currentPath];
  
  if (routeKey) {
    const newPath = `/${newLocale}${routeMap[newLocale][routeKey]}`;
    navigate(newPath);
  }
});

功能保留说明 #

所有组件的原有逻辑（如routeLoader$、routeAction$）都能正常工作，因为不同语言的路径最终都会映射到同一个组件文件，组件内部的业务逻辑无需修改。

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