i18next.t returns 未定义

Question

我有这个 .js 文件，其中包含我应用程序的所有路由：

import i18n from "i18next";

const dashRoutes = [
  // ...
  {
    path: "/user-profile",
    navbarName: i18n.t("userProfile"),
    component: UserProfile,
    layout: "/admin"
  },
// ...


export default dashRoutes;

然后像这样导入 index.js：

import React from "react";
import "./i18n";
import routes from "routes.js";

class App extends React.Component {

getRoutes = routes => {
    return routes.map((r, index) => {
        return (
          <PrivateRoute
            navbarName={r.navbarName} // here it is always undefined
          />
        );
    });
  };

  render() {
    return this.getRoutes(routes);
  }
}

ReactDOM.render(<App/>, document.getElementById("root"));

出于某种原因，r.navbarName 由于某种原因总是 undefined。有什么想法吗？

Answer 1

由于要导出 dashRoutes，因此必须导入 dashRoutes 本身，而不是 routes。如果您希望将变量命名为 routes，请执行以下操作之一：

import dashRoutes as routes from "routes.js";

import * as routes from "routes.js";

根据docs默认的导出只能用它们的确切名称导入，如果你想用不同的名称导入它，那么你可以像上面那样做

i18next.t returns 未定义

i18next.t returns undefined

javascript

reactjs

internationalization

i18next