如何在React Router v6.22.2中结合createBrowserRouter使用react-i18next？

问题根源 #

你遇到的警告本质是：createBrowserRouter 需要提前声明完整的路由对象，但 react-i18n 的初始化是异步过程（加载语言包、初始化实例），直接在路由定义的 handle 字段中调用 i18n.t() 会在初始化完成前执行，触发未就绪警告。

推荐解决方案 #

方案一：函数式元数据，延迟翻译执行 #

把路由 handle 中的翻译内容改成函数形式，延迟到 React 组件渲染阶段（此时 i18n 已初始化完成）再执行翻译。

路由定义示例

// pages/Home/index.ts
import { RouteObject } from 'react-router-dom';
import Home from './Home';

export const homeRoute: RouteObject = {
  path: '/',
  element: <Home />,
  handle: {
    // 用函数包裹翻译逻辑，不立即执行
    getTitle: () => i18n.t('home.title')
  }
};

全局使用元数据示例

可以写一个全局组件统一处理页面标题，利用 React Router 的 useLocation 获取路由 handle：

// components/PageTitle.tsx
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const PageTitle = () => {
  const location = useLocation();
  const routeHandle = location.handle as { getTitle?: () => string };

  useEffect(() => {
    if (routeHandle?.getTitle) {
      document.title = routeHandle.getTitle();
    }
  }, [location, routeHandle]);

  return null;
};

// 在 App 或根路由中引入
export default PageTitle;

这个方案的优势：无需延迟应用启动，翻译逻辑在组件渲染时执行，完全避开 i18n 未初始化的问题，适配绝大多数前端渲染场景。

方案二：延迟路由创建，等待 i18n 初始化完成 #

如果你的场景需要在路由创建阶段就拿到翻译后的元数据（比如服务端渲染、路由权限判断依赖翻译内容），可以等待 i18n 初始化完成后再生成路由。

页面路由函数定义

// pages/Home/index.ts
import { RouteObject } from 'react-router-dom';
import Home from './Home';

// 导出一个生成路由的函数，而非直接导出路由对象
export const getHomeRoute = (): RouteObject => ({
  path: '/',
  element: <Home />,
  handle: {
    title: i18n.t('home.title') // 此时 i18n 已初始化，可直接调用
  }
});

主入口等待初始化后创建路由

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import i18n from './i18n';
import { getHomeRoute } from './pages/Home';
import { getAboutRoute } from './pages/About';

// 等待 i18n 初始化完成后再渲染应用
i18n.init().then(() => {
  const router = createBrowserRouter([
    getHomeRoute(),
    getAboutRoute()
  ]);

  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      {/* 可选：添加初始化加载提示 */}
      <RouterProvider router={router} />
    </React.StrictMode>
  );
});

注意：这种方案会让应用启动前等待 i18n 初始化，建议添加加载动画或占位符优化用户体验。

方案三：页面组件内直接处理翻译（简单场景） #

如果不需要统一管理页面元数据，也可以直接在页面组件内使用 useTranslation 钩子处理翻译：

// pages/Home/Home.tsx
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';

const Home = () => {
  const { t } = useTranslation();

  useEffect(() => {
    document.title = t('home.title');
  }, [t]);

  return <div>首页内容</div>;
};

export default Home;

这个方案最直接，不需要修改路由结构，适合页面数量少、元数据逻辑简单的场景。

最佳实践总结 #

• 绝大多数前端渲染场景：优先选择方案一（函数式元数据），兼顾性能和灵活性，避免应用启动延迟。
• 需要在路由创建阶段使用翻译数据：选择方案二（延迟路由创建），并添加加载提示优化体验。
• 简单页面场景：可以直接用方案三，快速实现需求。

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