Блог

Это может быть очень простой вопрос, однако я нигде не смог найти на него ответ.

Как мне использовать язык по умолчанию с react-intl? Указание сообщения по умолчанию каждый раз становится действительно запутанным. То, как я делаю это в данный момент, похоже, не выдает сообщение по умолчанию, когда браузер использует языковой стандарт, у которого нет перевода.

Как я использую его в данный момент:

 import React from 'react'
import { Route } from 'react-router-dom'
import { IntlProvider } from 'react-intl'
import { Provider } from 'react-redux'
import { MuiThemeProvider, CssBaseline } from '@material-ui/core'

// import translations
import da_translations from './translations/da.json'
import de_translations from './translations/de.json'
import el_translations from './translations/el.json'
import en_translations from './translations/en.json'

import defaultTheme from './themes/default'

import {
  QueryParamProvider,
  ExtendedStringifyOptions,
  transformSearchStringJsonSafe,
} from 'use-query-params'
import configureStore from './redux/configure-store'
import { Routes } from './routes'

const store = configureStore()

const App = (): JSX.Element => {
  const state = { locale: navigator.language.slice(0, 2) }

  const messages: { [index: string]: any } = {
    da: da_translations,
    de: de_translations,
    el: el_translations,
    en: en_translations,
  }

  const queryStringifyOptions: ExtendedStringifyOptions = {
    transformSearchString: transformSearchStringJsonSafe,
  }

  return (
    <Provider store={store}>
      <IntlProvider
        defaultLocale={'en'}
        locale={state.locale}
        messages={messages[state.locale]}
      >
        <QueryParamProvider
          ReactRouterRoute={Route}
          stringifyOptions={queryStringifyOptions}
        >
          <MuiThemeProvider theme={defaultTheme}>
            <CssBaseline />
            <Routes />
          </MuiThemeProvider>
        </QueryParamProvider>
      </IntlProvider>
    </Provider>
  )
}

export default App

  

Редактировать:
package.json

 {
  "name": "myproj",
  "version": "0.8.47",
  "description": "frontend",
  "private": false,
  "main": "dist/index.js",
  "dependencies": {
    "@babel/register": "^7.12.1",
    "@date-io/date-fns": "^1.3.13",
    "@google-cloud/translate": "^6.0.3",
    "@material-ui/core": "^4.11.1",
    "@material-ui/icons": "4.2.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^3.2.10",
    "@types/axios": "^0.14.0",
    "@types/history": "^4.7.3",
    "@types/jest": "^24.9.1",
    "@types/lodash": "^4.14.158",
    "@types/node": "^12.12.7",
    "@types/react": "^16.9.11",
    "@types/react-dom": "^16.9.4",
    "@types/react-html-parser": "^2.0.1",
    "@types/react-intl": "^3.0.0",
    "@types/react-redux": "^7.1.9",
    "@types/react-resizable": "^1.7.2",
    "@types/react-router-dom": "^5.1.2",
    "@types/reselect": "^2.2.0",
    "@types/seamless-immutable": "^7.1.13",
    "accept-language": "^3.0.18",
    "ag-grid-community": "^23.1.1",
    "ag-grid-react": "^23.1.1",
    "axios": "^0.19.1",
    "chai": "^4.2.0",
    "chartist": "0.10.1",
    "classnames": "^2.2.6",
    "clsx": "^1.1.0",
    "date-fns": "^2.9.0",
    "flexsearch": "^0.6.32",
    "fs-extra": "^9.0.1",
    "history": "4.9.0",
    "immutable": "^4.0.0-rc.12",
    "js-yaml": "^3.14.0",
    "lodash": "^4.17.19",
    "log4js": "^6.3.0",
    "loglevel": "^1.6.6",
    "minimist": "^1.2.5",
    "perfect-scrollbar": "1.4.0",
    "prop-types": "15.7.2",
    "qs": "^6.9.4",
    "query-string": "^6.13.1",
    "react": "^16.12.0",
    "react-chartist": "0.13.3",
    "react-dom": "^16.12.0",
    "react-google-maps": "9.4.5",
    "react-html-parser": "^2.0.2",
    "react-intl": "^3.11.0",
    "react-redux": "^7.2.1",
    "react-resizable": "^1.10.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "4.0.0",
    "react-swipeable-views": "0.13.3",
    "redux": "^4.0.5",
    "redux-observable": "^1.2.0",
    "reselect": "^4.0.0",
    "seamless-immutable": "^7.1.4",
    "use-query-params": "^1.1.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env jest-environment-jsdom-sixteen --verbose",
    "eject": "react-scripts eject",
    "install:clean": "rm -rf node_modules/ amp;amp; rm -rf package-lock.json amp;amp; npm install amp;amp; npm start",
    "lint:check": "eslint . --ext=js,jsx;  exit 0",
    "lint:fix": "eslint . --ext=js,jsx --fix;  exit 0",
    "build-package-css": "cp src/assets/css/material-dashboard-react.css dist/material-dashboard-react.css",
    "build-package": "npm run build-package-css amp;amp; babel src --out-dir dist"
  },
  
  "keywords": [],
  "author": "tb",
  "license": "MIT",
  "homepage": "./",
  "optionalDependencies": {
    "@types/googlemaps": "3.37.3",
    "@types/markerclustererplus": "2.1.33",
    "ajv": "6.10.2"
  },
  "devDependencies": {
    "@testing-library/dom": "^7.24.2",
    "@testing-library/jest-dom": "^5.11.1",
    "@testing-library/react": "^10.4.7",
    "@testing-library/user-event": "^12.1.4",
    "@types/chai": "^4.2.13",
    "@types/classnames": "^2.2.10",
    "@types/enzyme": "^3.10.5",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "@types/gulp": "^4.0.7",
    "@types/jsdom": "^16.2.2",
    "@typescript-eslint/eslint-plugin": "^4.7.0",
    "@typescript-eslint/parser": "^4.7.0",
    "axios-mock-adapter": "^1.18.2",
    "cross-env": "^5.1.4",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "eslint-config-prettier": "6.0.0",
    "eslint-plugin-prettier": "3.1.0",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "gulp": "^4.0.2",
    "gulp-append-prepend": "1.0.8",
    "gulp-filter": "^6.0.0",
    "gulp-prettier": "^3.0.0",
    "husky": "^4.3.0",
    "jest-environment-jsdom-sixteen": "^1.0.3",
    "jsdom": "^16.2.2",
    "prettier": "^2.1.2",
    "pretty-quick": "^3.1.0",
    "react-intl-translations-manager": "^5.0.3",
    "ts-node": "^9.0.0",
    "typescript": "^3.9.7"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": []
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },
  "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(@ui5|lit-html)).*\.js$"
    ]
  }
}