ReactJS i18n 库实现问题

Question

我是 React 的新手，我正在尝试在我的应用程序中添加 i18n。我想不通/我知道这对我来说是愚蠢的，但我找不到解决我的问题的方法/。我有两个简单的问题，如果你能给我答案我会很高兴。

我试图在我的菜单组件中添加资源，但它给了我 "Parsing error: Unexpected token"。你能告诉我如何添加关于 i18n 的常量吗？

import React from "react";
import { Link } from "react-router-dom";
import { useTranslation } from 'react-i18next';
import "./navbar.scss";

const Navbar = () => (
  const { t, i18n } = useTranslation()
  <div className="Navbar">
    <nav>
      <ul>
        <li>
          <Link to="">{t('b.label')}</Link>
        </li>
        <li>
          <Link to="/">{t('sm.label')}</Link>
        </li>
        <li>
          <Link to="/">{t('aboutmenu.label')}</Link>
        </li>
        <li>
          <Link to="/">{t('contactmenu.label')}}</Link>
        </li>
        <li>
          <Link to="/">BG/EN</Link>
        </li>
      </ul>
    </nav>
  </div>
);
export default Navbar;

我的第二个问题是如何将国际化库添加到我的标题标签中，因为我的结构是在 html 组件中。

我知道这些是非常愚蠢的问题，但我自学反应，但我找不到那些简单的答案。

先谢谢你了，我保证以后不会再因为这类问题打扰你了

Answer 1

没有傻问题，不用担心

请尝试使用以下代码：

import React from "react";
import { Link } from "react-router-dom";
import { useTranslation } from 'react-i18next';

import "./navbar.scss";

const Navbar = () => {
  const { t, i18n } = useTranslation();

  return (
    <span>{t('b.label')}</span>
    <span>{t('sm.label')}</span>
    <span>{t('aboutmenu.label')}</span>
    <span>{t('contactmenu.label')}</span>
  );
}

如果您的项目是从 create-react-app in most cases you shouldn't need to add libraries in your head tag (which is located in public/index.html). To configure the react-i18next library read the react-i18next guide 开始的。

这似乎是一个不错的 youtube guide，应该可以教您更多关于 React 和 i18n-react 的知识。祝你好运！ :)

ReactJS i18n 库实现问题

ReactJS i18n library implementation problem

i18next

reactjs