React i18n translate in route

Question

I installed the package with i18n translation, connected it, the translation works fine, but I have a problem with the translation of the menu.

The fact is that when you change the language, the site menu remains in the old language, but if you update the site page, the menu is translated.

I need to fix this error and translate the menu on the fly.

My routes file looks like this:

import React, { lazy } from 'react';
import ServerConsole from '@/components/server/console/ServerConsoleContainer';
import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
import * as Icon from 'react-feather';
import { t } from 'react-i18next'; // Импортируем useTranslation


// Each of the router files is already code split out appropriately — so
// all of the items above will only be loaded in when that router is loaded.
//
// These specific lazy loaded routes are to avoid loading in heavy screens
// for the server dashboard when they're only needed for specific instances.
const FileEditContainer = lazy(() => import('@/components/server/files/FileEditContainer'));
const ScheduleEditContainer = lazy(() => import('@/components/server/schedules/ScheduleEditContainer'));

interface RouteDefinition {
    path: string;
    // If undefined is passed this route is still rendered into the router itself
    // but no navigation link is displayed in the sub-navigation menu.
    name: string | undefined;
    component: React.ComponentType;
    icon?: React.ComponentType;
    exact?: boolean;
}

interface ServerRouteDefinition extends RouteDefinition {
    permission: string | string[] | null;
    nestId?: number;
    eggId?: number;
    nestIds?: number[];
    eggIds?: number[];
}

interface Routes {
    // All of the routes available under "/account"
    account: RouteDefinition[];
    // All of the routes available under "/server/:id"
    server: ServerRouteDefinition[];
}

export default {
    account: [
        {
            path: "https://stackoverflow.com/",
            name: t('account.title'),
            icon: Icon.User,
            component: AccountOverviewContainer,
            exact: true,
        },
    ],
    server: [
        {
            path: "https://stackoverflow.com/",
            permission: null,
            name: t('account.title'),
            icon: Icon.Terminal,
            component: ServerConsole,
            exact: true,
        },
    ],
} as Routes;

Everything looks and works well, but the on-the-fly translation doesn’t want to work. As I understand it, perhaps the problem is that I do not use import { useTranslation }, but no matter how I tried to add it, I could not get it to work correctly, i.e. if I am not mistaken, { useTranslation } must be used in the export default () => {, but after export default i use return, and here i can’t use const with { useTranslation }.

How can I get the translation to work on the fly correctly?
Thanks for help.

Leave a Comment Cancel reply